<template>
  <el-drawer
    size="550px"
    class="drawer jsbos-common-drawer"
    :visible.sync="visible"
    @close="cancel"
    v-if="properties"
    append-to-body
    :wrapperClosable="false"
  >
    <!-- 标题 -->
    <header
      slot="title"
      class="header"
      v-if="
        value &&
        (value.type == 'condition' ||
          value.type == 'approver' ||
          value.type == 'subFlow' ||
          value.type == 'start')
      "
    >
      <el-input
        size="mini"
        v-model="properties.title"
        style="z-index: 9; max-width: 200px"
        placeholder="请输入"
      >
      </el-input>
    </header>
    <header slot="title" class="header" v-else>{{ properties.title }}</header>

    <!-- 条件  -->
    <section class="condition-pane pd-10" v-if="value && isConditionNode()">
      <el-row class="condition-list condition-list-header">
        <el-col :span="6" class="label">字段名称</el-col>
        <el-col :span="5">比较</el-col>
        <el-col :span="7">数据值</el-col>
        <el-col :span="4">逻辑</el-col>
        <el-col :span="2"></el-col>
      </el-row>
      <template v-for="(item, index) in pconditions">
        <el-row class="condition-list" :key="index">
          <el-col :span="6" class="label">
            <el-select
              v-model="item.field"
              placeholder="请选择"
              @change="fieldNameChange($event, item, index)"
            >
              <el-option
                v-for="item in usedFormItems"
                :key="item.__vModel__"
                :label="item.__config__.label"
                :value="item.__vModel__"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="5">
            <el-select
              v-model="item.symbol"
              placeholder="请选择"
              @change="symbolChange($event, item)"
            >
              <el-option
                v-for="item in symbolOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="7" class="filedValue">
            <template v-if="item.keyName === 'numInput'">
              <el-input-number
                v-model="item.filedValue"
                placeholder="请输入"
                :precision="item.precision"
                controls-position="right"
              />
            </template>
            <template v-else-if="item.keyName === 'calculate'">
              <el-input-number
                v-model="item.filedValue"
                placeholder="请输入"
                :precision="2"
                controls-position="right"
              />
            </template>
            <template v-else-if="['rate', 'slider'].includes(item.keyName)">
              <el-input-number
                v-model="item.filedValue"
                placeholder="请输入"
                controls-position="right"
              />
            </template>
            <template v-else-if="item.keyName === 'switch'">
              <el-switch
                v-model="item.filedValue"
                :active-value="1"
                :inactive-value="0"
              />
            </template>
            <template v-else-if="item.keyName === 'time'">
              <el-time-picker
                v-model="item.filedValue"
                :picker-options="item['picker-options']"
                placeholder="请选择"
                clearable
                :value-format="item['value-format']"
                :format="item.format"
              >
              </el-time-picker>
            </template>
            <template
              v-else-if="
                ['date', 'createTime', 'modifyTime'].includes(item.keyName)
              "
            >
              <el-date-picker
                v-model="item.filedValue"
                :type="item.type || 'datetime'"
                clearable
                placeholder="请选择"
                value-format="timestamp"
                @change="onConditionDateChange($event, item)"
                :format="item.format || 'yyyy-MM-dd HH:mm:ss'"
              >
              </el-date-picker>
            </template>
            <template
              v-else-if="['comSelect', 'currOrganize'].includes(item.keyName)"
            >
              <comSelect
                v-model="item.filedValue"
                placeholder="请选择"
                clearable
                @change="onConditionListChange(arguments, item)"
              />
            </template>
            <template v-else-if="['depSelect'].includes(item.keyName)">
              <depSelect
                v-model="item.filedValue"
                placeholder="请选择"
                clearable
                @change="onConditionObjChange(arguments, item)"
              />
            </template>
            <template
              v-else-if="
                ['userSelect', 'createUser', 'modifyUser'].includes(
                  item.keyName
                )
              "
            >
              <userSelect
                v-model="item.filedValue"
                placeholder="请选择"
                hasSys
                clearable
                @change="onConditionObjChange(arguments, item)"
              />
            </template>
            <template
              v-else-if="['posSelect', 'currPosition'].includes(item.keyName)"
            >
              <posSelect
                v-model="item.filedValue"
                placeholder="请选择"
                clearable
                @change="onConditionObjChange(arguments, item)"
              />
            </template>
            <template v-else-if="item.keyName === 'address'">
              <JNPFAddress
                v-model="item.filedValue"
                placeholder="请选择"
                :level="item.level"
                clearable
                @change="onConditionListChange(arguments, item)"
              />
            </template>
            <template v-else>
              <el-input
                v-model="item.filedValue"
                placeholder="请输入"
              ></el-input>
            </template>
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="item.logic"
              placeholder="请选择"
              @change="logicChange($event, item)"
            >
              <el-option
                v-for="item in logicOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="2">
            <i class="el-icon-delete" @click="onDelCondition(index)"></i>
          </el-col>
        </el-row>
      </template>
      <div style="padding-left: 4px; margin-top: 10px">
        <el-button size="small" icon="el-icon-plus" @click="addCondition()"
          >添加条件</el-button
        >
      </div>
    </section>

    <!-- 定时器  -->
    <section class="condition-pane pd-10" v-if="value && isTimerNode()">
      <el-row>
        <el-col
          :span="24"
          style="font-size: 14px; line-height: 32px; color: #a5a5a5"
        >
          添加定时器后，审批节点将根据设置的时间流转</el-col
        >
        <el-col :span="24">
          <el-form label-position="top">
            <el-form-item label="时间设置">
              <div class="mb-10">
                <el-input-number
                  :min="0"
                  v-model="properties.day"
                  :precision="0"
                  controls-position="right"
                />
                <span>天</span>
              </div>
              <div class="mb-10">
                <el-input-number
                  :min="0"
                  v-model="properties.hour"
                  :precision="0"
                  controls-position="right"
                />
                <span>小时</span>
              </div>
              <div class="mb-10">
                <el-input-number
                  :min="0"
                  v-model="properties.minute"
                  :precision="0"
                  controls-position="right"
                />
                <span>分钟</span>
              </div>
              <div>
                <el-input-number
                  :min="0"
                  v-model="properties.second"
                  :precision="0"
                  controls-position="right"
                />
                <span>秒</span>
              </div>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </section>

    <!-- 子流程  -->
    <section class="approver-pane" v-if="value && isSubFlowNode()">
      <el-tabs style="height: 100%">
        <el-tab-pane label="基础设置">
          <el-scrollbar class="config-scrollbar">
            <el-form label-position="top" :model="subFlowForm" class="pd-10">
              <el-form-item label="发起设置">
                <el-radio-group v-model="subFlowForm.initiateType">
                  <el-radio
                    v-for="item in initiateTypeOptions"
                    :label="item.value"
                    :key="item.value"
                    :disabled="item.disabled"
                    class="radio-item"
                    >{{ item.label }}
                  </el-radio>
                </el-radio-group>
                <div
                  v-if="subFlowForm.initiateType === 1"
                  class="option-box-tip"
                >
                  发起者的主管将作为子流程发起人
                </div>
                <div
                  v-if="subFlowForm.initiateType === 2"
                  class="option-box-tip"
                >
                  发起者的部门主管将作为子流程发起人
                </div>
                <div
                  v-if="subFlowForm.initiateType === 3"
                  class="option-box-tip"
                >
                  发起者自己将作为子流程发起人
                </div>
                <div
                  v-if="subFlowForm.initiateType === 4"
                  class="option-box-tip"
                >
                  选择表单字段的值作为子流程发起人
                </div>
                <div
                  v-if="subFlowForm.initiateType === 5"
                  class="option-box-tip"
                >
                  设置审批流程中某个环节的审批人作为子流程发起人
                </div>
                <div
                  v-if="subFlowForm.initiateType === 6"
                  class="option-box-tip"
                >
                  所指定的成员将作为子流程发起人，多人时，发起多个子流程
                </div>
                <div
                  v-if="subFlowForm.initiateType === 9"
                  class="option-box-tip"
                >
                  通过第三方调用从目标服务中获取子流程发起人
                </div>
                <el-form-item
                  label="发起者的"
                  style="margin-bottom: 0"
                  v-if="subFlowForm.initiateType === 1"
                >
                  <el-select v-model="subFlowForm.managerLevel">
                    <el-option
                      v-for="item in 10"
                      :key="item"
                      :label="item === 1 ? '直接主管' : '第' + item + '级主管'"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="表单字段"
                  style="margin-bottom: 0"
                  v-if="subFlowForm.initiateType === 4"
                >
                  <el-radio-group v-model="subFlowForm.formFieldType">
                    <el-radio :label="1">用户</el-radio>
                    <el-radio :label="2">部门</el-radio>
                  </el-radio-group>
                  <el-select
                    v-model="subFlowForm.formField"
                    placeholder="请选择字段"
                  >
                    <el-option
                      v-for="item in usedFormItems"
                      :key="item.__vModel__"
                      :label="item.__config__.label"
                      :value="item.__vModel__"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="审批节点"
                  style="margin-bottom: 0"
                  v-if="subFlowForm.initiateType === 5"
                >
                  <el-select
                    v-model="subFlowForm.nodeId"
                    placeholder="请选择节点"
                  >
                    <el-option
                      v-for="item in nodeOptions"
                      :key="item.nodeId"
                      :label="item.properties.title"
                      :value="item.nodeId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  style="margin-bottom: 0"
                  v-if="subFlowForm.initiateType === 9"
                >
                  <div slot="label">
                    请求路径
                    <el-tooltip
                      content="自带参数：taskId、taskNodeId"
                      placement="top"
                    >
                      <a class="el-icon-question"></a>
                    </el-tooltip>
                  </div>
                  <el-input
                    v-model="subFlowForm.getUserUrl"
                    placeholder="请输入接口地址"
                  >
                    <template slot="prepend">GET</template>
                  </el-input>
                </el-form-item>
                <el-form-item
                  style="margin-bottom: 0"
                  v-if="subFlowForm.initiateType === 6"
                >
                  <org-select
                    ref="subFlow-role-org"
                    type="role"
                    v-model="subFlowForm.initiateRole"
                    title="添加角色"
                    class="mb-10"
                    buttonType="button"
                  />
                  <org-select
                    ref="subFlow-position-org"
                    buttonType="button"
                    v-model="subFlowForm.initiatePos"
                    title="添加岗位"
                    type="position"
                    class="mb-10"
                  />
                  <org-select
                    ref="subFlow-user-org"
                    buttonType="button"
                    v-model="subFlowForm.initiator"
                    title="添加用户"
                  />
                </el-form-item>
              </el-form-item>
              <el-form-item label="子流程类型">
                <el-radio-group v-model="subFlowForm.isAsync">
                  <el-radio :label="false">同步</el-radio>
                  <el-radio :label="true">异步</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="子流程表单">
                <JsbosTreeSelect
                  :options="flowOptions"
                  v-model="subFlowForm.flowId"
                  placeholder="请选择子流程表单"
                  lastLevel
                  clearable
                  @change="subFlowForm.assignList = []"
                />
              </el-form-item>
              <el-form-item label="数据传递">
                <div @click="openRuleBox">
                  <el-input
                    :value="subFlowForm.assignList.length ? '已设置' : ''"
                    placeholder="请设置数据传递规则"
                    suffix-icon="el-icon-arrow-down"
                    readonly
                    class="hand"
                  />
                </div>
              </el-form-item>
            </el-form>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="节点通知">
          <el-scrollbar class="config-scrollbar">
            <el-form :model="subFlowForm" label-position="top" class="pd-10">
              <el-alert
                title="该通知设置配置外部第三方消息提醒，站内信系统默认发送"
                type="warning"
                :closable="false"
                show-icon
              />
              <el-form-item class="mt-10">
                <div slot="label">
                  子流程发起
                  <el-tooltip content="该子流程被发起的时候" placement="top">
                    <a class="el-icon-question"></a>
                  </el-tooltip>
                </div>
                <el-select
                  v-model="subFlowForm.launchMsgConfig.on"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in noticeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <template v-if="subFlowForm.launchMsgConfig.on === 1">
                <el-form-item label="消息模板">
                  <msg-dialog
                    :value="subFlowForm.launchMsgConfig.msgId"
                    :title="subFlowForm.launchMsgConfig.msgName"
                    @change="
                      onMsgChange('subFlowForm', 'launchMsgConfig', arguments)
                    "
                  />
                </el-form-item>
                <el-form-item
                  label="参数设置"
                  style="margin-bottom: 0"
                ></el-form-item>
                <el-table :data="subFlowForm.launchMsgConfig.templateJson">
                  <el-table-column
                    type="index"
                    width="50"
                    label="序号"
                    align="center"
                  />
                  <el-table-column prop="field" label="参数名称" width="200">
                    <template slot-scope="scope">
                      {{
                        scope.row.fieldName
                          ? scope.row.field + "(" + scope.row.fieldName + ")"
                          : scope.row.field
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="value" label="表单字段">
                    <template slot-scope="scope">
                      <el-select
                        v-model="scope.row.relationField"
                        placeholder="请选择表单字段"
                        clearable
                        filterable
                      >
                        <el-option
                          v-for="item in funcOptions"
                          :key="item.__vModel__"
                          :label="
                            item.__config__.label
                              ? item.__vModel__ +
                                '(' +
                                item.__config__.label +
                                ')'
                              : item.__vModel__
                          "
                          :value="item.__vModel__"
                        >
                        </el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-form>
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
    </section>
    <!-- v-if="flowType != 1" -->
    <!-- 发起人 -->
    <section class="approver-pane" v-if="value && isStartNode()">
      <el-tabs style="height: 100%" v-model="subActiveName">
        <el-tab-pane label="基础设置" name="config">
          <el-scrollbar class="config-scrollbar">
            <el-row class="pd-10">
              <el-col :span="4" style="font-size: 14px; line-height: 32px"
                >谁可以发起</el-col
              >
              <el-col
                :span="20"
                style="font-size: 14px; line-height: 32px; margin-bottom: 10px"
              >
                默认所有人,需要设置请选择
              </el-col>
              <div class="option-box">
                <org-select
                  ref="start-role-org"
                  type="role"
                  v-model="initiateRole"
                  title="添加角色"
                  class="mb-10"
                  buttonType="button"
                />
                <org-select
                  ref="start-position-org"
                  type="position"
                  v-model="initiatePos"
                  title="添加岗位"
                  class="mb-10"
                  buttonType="button"
                />
                <org-select
                  ref="start-user-org"
                  type="user"
                  v-model="initiator"
                  title="添加用户"
                  buttonType="button"
                />
              </div>
            </el-row>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="高级设置" name="senior">
          <el-scrollbar class="config-scrollbar">
            <el-form label-position="top" class="pd-10">
              <el-form-item label="操作设置">
                <div class="per-cell">
                  <el-checkbox v-model="startForm.hasSubmitBtn" disabled
                    >提交</el-checkbox
                  >
                  <el-input v-model="startForm.submitBtnText" />
                </div>
                <div class="per-cell">
                  <el-checkbox v-model="startForm.hasSaveBtn" disabled
                    >暂存</el-checkbox
                  >
                  <el-input v-model="startForm.saveBtnText" />
                </div>
                <div class="per-cell">
                  <el-checkbox v-model="startForm.hasRevokeBtn"
                    >撤回</el-checkbox
                  >
                  <el-input v-model="startForm.revokeBtnText" />
                </div>
                <div class="per-cell">
                  <el-checkbox v-model="startForm.hasPressBtn"
                    >催办</el-checkbox
                  >
                  <el-input v-model="startForm.pressBtnText" />
                </div>
                <div class="per-cell">
                  <el-checkbox v-model="startForm.hasPrintBtn"
                    >打印</el-checkbox
                  >
                  <el-input v-model="startForm.printBtnText" />
                </div>
                <div class="per-cell" v-if="startForm.hasPrintBtn">
                  <p style="width: 112px"></p>
                  <JsbosTreeSelect
                    :options="printTplList"
                    v-model="startForm.printId"
                    placeholder="请选择打印模板"
                    lastLevel
                    clearable
                  ></JsbosTreeSelect>
                </div>
              </el-form-item>
            </el-form>
            <el-form class="pd-10" style="margin-top: -20px">
              <el-form-item label="审核汇总">
                <el-switch v-model="startForm.isSummary" />
                <div class="option-box-tip" v-if="!startForm.isSummary">
                  *打开审核汇总后，流程流转记录会按部门及岗位进行汇总展示
                </div>
              </el-form-item>
              <el-form-item label="汇总设置" v-if="startForm.isSummary">
                <el-select v-model="startForm.summaryType" placeholder="请选择">
                  <el-option label="汇总全部流转记录" :value="0"></el-option>
                  <el-option
                    label="汇总通过及驳回流转记录"
                    :value="1"
                  ></el-option>
                </el-select>
                <div class="option-box-tip">
                  *打开审核汇总后，流程流转记录会按部门及岗位进行汇总展示
                </div>
              </el-form-item>
              <el-form-item label="流程评论">
                <el-switch v-model="startForm.isComment" />
                <div class="option-box-tip">
                  *打开流程评论后，流程内涉及的用户均可进行意见评论
                </div>
              </el-form-item>
              <el-form-item label="批量审批">
                <el-switch v-model="startForm.isBatchApproval" />
                <div class="option-box-tip">
                  *打开批量审批后，该流程待审批工单可进行批量操作
                </div>
              </el-form-item>
            </el-form>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="表单权限" name="formAuth">
          <div class="form-auth-table">
            <el-table
              :data="getFormOperates()"
              class="jsbos-common-table"
              size="mini"
              height="100%"
            >
              <el-table-column
                prop="name"
                label="表单字段"
                align="left"
              ></el-table-column>
              <el-table-column
                prop="write"
                label="操作"
                align="center"
                width="250"
              >
                <template slot-scope="scope">
                  <el-checkbox
                    v-model="scope.row.read"
                    @change="syncReadSelection(scope.row)"
                    >查看</el-checkbox
                  >
                  <el-checkbox v-model="scope.row.write">编辑</el-checkbox>
                  <el-checkbox
                    v-model="scope.row.required"
                    :disabled="scope.row.requiredDisabled"
                  >
                    必填</el-checkbox
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="流程事件">
          <el-scrollbar class="config-scrollbar">
            <el-form :model="startForm" class="pd-10" label-position="left">
              <el-alert
                title="开启后可配置触发事件同时进行参数赋值"
                type="warning"
                :closable="false"
                show-icon
              />
              <el-form-item label="发起事件" class="mt-10">
                <el-switch v-model="startForm.initFuncConfig.on" />
              </el-form-item>

              <div
                style="margin-bottom: 18px"
                v-if="startForm.initFuncConfig.on"
              >
                <el-form-item label="任务类型" prop="executeType">
                  <el-radio-group
                    v-model="startForm.executeType"
                    @change="onExecuteTypeChange"
                  >
                    <el-radio label="1">API操作</el-radio>
                    <el-radio label="2"
                      >本地任务
                      <el-tooltip
                        content="获取在程序中事先写好的本地方法"
                        placement="top"
                      >
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item
                  label="接口设置"
                  style="margin-bottom: 0"
                  v-if="startForm.executeType == '1'"
                ></el-form-item>
                <el-form-item
                  label-width="0"
                  v-if="startForm.executeType == '1'"
                >
                  <interface-dialog
                    :value="startForm.initFuncConfig.interfaceId"
                    :title="startForm.initFuncConfig.interfaceName"
                    @change="
                      onFuncChange('startForm', 'initFuncConfig', arguments)
                    "
                  />
                </el-form-item>

                <el-form-item
                  label="方法选择"
                  prop="startForm.initFuncConfig.flowCallBackMethod"
                  v-if="startForm.executeType == '2'"
                >
                  <el-tooltip
                    content="获取流程的本地方法"
                    placement="top"
                    v-if="startForm.executeType == '2'"
                  >
                    <i class="el-icon-warning-outline"></i>
                  </el-tooltip>
                  <el-select
                    v-model="startForm.initFuncConfig.flowCallBackMethod"
                    placeholder="请选择"
                    @change="onLocalHostTaskIdChange"
                    clearable
                  >
                    <el-option
                      v-for="item in taskOptions"
                      :key="item.id"
                      :label="item.fullName"
                      :value="item.id"
                    />
                  </el-select>
                  <div
                    class="el-icon-warning-outline"
                    style="font-size: 12px; color: #a5a5a5"
                  >
                    {{ startForm.initFuncConfig.flowCallBackMethod }}
                  </div>
                </el-form-item>

                <el-form-item
                  label="参数设置"
                  style="margin-bottom: 0"
                  v-if="startForm.executeType == '1'"
                ></el-form-item>
                <el-table
                  :data="startForm.initFuncConfig.templateJson"
                  v-if="startForm.executeType == '1'"
                >
                  <el-table-column
                    type="index"
                    width="50"
                    label="序号"
                    align="center"
                  />
                  <el-table-column prop="field" label="参数名称" width="200">
                    <template slot-scope="scope">
                      <span class="required-sign">{{
                        scope.row.required ? "*" : ""
                      }}</span>
                      {{
                        scope.row.fieldName
                          ? scope.row.field + "(" + scope.row.fieldName + ")"
                          : scope.row.field
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="value" label="表单字段">
                    <template slot-scope="scope">
                      <template v-if="scope.row.required">
                        <el-select
                          v-model="scope.row.relationField"
                          placeholder="请选择表单字段"
                          clearable
                          filterable
                        >
                          <el-option
                            v-for="item in funcRequiredOptions"
                            :key="item.__vModel__"
                            :label="
                              item.__config__.label
                                ? item.__vModel__ +
                                  '(' +
                                  item.__config__.label +
                                  ')'
                                : item.__vModel__
                            "
                            :value="item.__vModel__"
                          >
                          </el-option>
                        </el-select>
                      </template>
                      <template v-else>
                        <el-select
                          v-model="scope.row.relationField"
                          placeholder="请选择表单字段"
                          clearable
                          filterable
                        >
                          <el-option
                            v-for="item in funcOptions"
                            :key="item.__vModel__"
                            :label="
                              item.__config__.label
                                ? item.__vModel__ +
                                  '(' +
                                  item.__config__.label +
                                  ')'
                                : item.__vModel__
                            "
                            :value="item.__vModel__"
                          >
                          </el-option>
                        </el-select>
                      </template>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <el-form-item label="结束事件">
                <el-switch v-model="startForm.endFuncConfig.on" />
              </el-form-item>

              <div
                style="margin-bottom: 18px"
                v-if="startForm.endFuncConfig.on"
              >
                <el-form-item label="任务类型" prop="endType">
                  <el-radio-group
                    v-model="startForm.endType"
                    @change="onEndTypeChange"
                  >
                    <el-radio label="1">API操作</el-radio>
                    <el-radio label="2"
                      >本地任务
                      <el-tooltip
                        content="获取在程序中事先写好的本地方法"
                        placement="top"
                      >
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item
                  label="接口设置"
                  style="margin-bottom: 0"
                  v-if="startForm.endType == '1'"
                ></el-form-item>
                <el-form-item label-width="0" v-if="startForm.endType == '1'">
                  <interface-dialog
                    :value="startForm.endFuncConfig.interfaceId"
                    :title="startForm.endFuncConfig.interfaceName"
                    @change="
                      onFuncChange('startForm', 'endFuncConfig', arguments)
                    "
                  />
                </el-form-item>

                <el-form-item
                  label="本地方法"
                  prop="startForm.endFuncConfig.flowCallBackMethod"
                  v-if="startForm.endType == '2'"
                >
                  <el-tooltip
                    content="获取流程的本地方法"
                    placement="top"
                    v-if="startForm.endType == '2'"
                  >
                    <i class="el-icon-warning-outline"></i>
                  </el-tooltip>
                  <el-select
                    v-model="startForm.endFuncConfig.flowCallBackMethod"
                    placeholder="请选择"
                    @change="onLocalHostTaskIdChange"
                    clearable
                  >
                    <el-option
                      v-for="item in taskOptions"
                      :key="item.id"
                      :label="item.fullName"
                      :value="item.id"
                    />
                  </el-select>
                  <div
                    class="el-icon-warning-outline"
                    style="font-size: 12px; color: #a5a5a5"
                  >
                    {{ startForm.endFuncConfig.flowCallBackMethod }}
                  </div>
                </el-form-item>
                <el-form-item
                  label="参数设置"
                  style="margin-bottom: 0"
                  v-if="startForm.endType == '1'"
                ></el-form-item>
                <el-table
                  :data="startForm.endFuncConfig.templateJson"
                  v-if="startForm.endType == '1'"
                >
                  <el-table-column
                    type="index"
                    width="50"
                    label="序号"
                    align="center"
                  />
                  <el-table-column prop="field" label="参数名称" width="200">
                    <template slot-scope="scope">
                      <span class="required-sign">{{
                        scope.row.required ? "*" : ""
                      }}</span>
                      {{
                        scope.row.fieldName
                          ? scope.row.field + "(" + scope.row.fieldName + ")"
                          : scope.row.field
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="value" label="表单字段">
                    <template slot-scope="scope">
                      <template v-if="scope.row.required">
                        <el-select
                          v-model="scope.row.relationField"
                          placeholder="请选择表单字段"
                          clearable
                          filterable
                        >
                          <el-option
                            v-for="item in funcRequiredOptions"
                            :key="item.__vModel__"
                            :label="
                              item.__config__.label
                                ? item.__vModel__ +
                                  '(' +
                                  item.__config__.label +
                                  ')'
                                : item.__vModel__
                            "
                            :value="item.__vModel__"
                          >
                          </el-option>
                        </el-select>
                      </template>
                      <template v-else>
                        <el-select
                          v-model="scope.row.relationField"
                          placeholder="请选择表单字段"
                          clearable
                          filterable
                        >
                          <el-option
                            v-for="item in funcOptions"
                            :key="item.__vModel__"
                            :label="
                              item.__config__.label
                                ? item.__vModel__ +
                                  '(' +
                                  item.__config__.label +
                                  ')'
                                : item.__vModel__
                            "
                            :value="item.__vModel__"
                          >
                          </el-option>
                        </el-select>
                      </template>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <el-form-item label="撤回事件">
                <el-switch v-model="startForm.flowRecallFuncConfig.on" />
              </el-form-item>

              <div v-if="startForm.flowRecallFuncConfig.on">
                <el-form-item label="任务类型" prop="flowRecallType">
                  <el-radio-group
                    v-model="startForm.flowRecallType"
                    @change="onFlowRecallTypeChange"
                  >
                    <el-radio label="1">API操作</el-radio>
                    <el-radio label="2"
                      >本地任务
                      <el-tooltip
                        content="获取在程序中事先写好的本地方法"
                        placement="top"
                      >
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item
                  label="接口设置"
                  style="margin-bottom: 0"
                  v-if="startForm.flowRecallType == '1'"
                ></el-form-item>
                <el-form-item
                  label-width="0"
                  v-if="startForm.flowRecallType == '1'"
                >
                  <interface-dialog
                    :value="startForm.flowRecallFuncConfig.interfaceId"
                    :title="startForm.flowRecallFuncConfig.interfaceName"
                    @change="
                      onFuncChange(
                        'startForm',
                        'flowRecallFuncConfig',
                        arguments
                      )
                    "
                  />
                </el-form-item>

                <el-form-item
                  label="本地方法"
                  prop="startForm.flowRecallFuncConfig.flowCallBackMethod"
                  v-if="startForm.flowRecallType == '2'"
                >
                  <el-tooltip
                    content="获取流程的本地方法"
                    placement="top"
                    v-if="startForm.flowRecallType == '2'"
                  >
                    <i class="el-icon-warning-outline"></i>
                  </el-tooltip>
                  <el-select
                    v-model="startForm.flowRecallFuncConfig.flowCallBackMethod"
                    placeholder="请选择"
                    @change="onLocalHostTaskIdChange"
                    clearable
                  >
                    <el-option
                      v-for="item in taskOptions"
                      :key="item.id"
                      :label="item.fullName"
                      :value="item.id"
                    />
                  </el-select>
                  <div
                    class="el-icon-warning-outline"
                    style="font-size: 12px; color: #a5a5a5"
                  >
                    {{ startForm.flowRecallFuncConfig.flowCallBackMethod }}
                  </div>
                </el-form-item>
                <el-form-item
                  label="参数设置"
                  style="margin-bottom: 0"
                  v-if="startForm.flowRecallType == '1'"
                ></el-form-item>
                <el-table
                  :data="startForm.flowRecallFuncConfig.templateJson"
                  v-if="startForm.flowRecallType == '1'"
                >
                  <el-table-column
                    type="index"
                    width="50"
                    label="序号"
                    align="center"
                  />
                  <el-table-column prop="field" label="参数名称" width="200">
                    <template slot-scope="scope">
                      <span class="required-sign">{{
                        scope.row.required ? "*" : ""
                      }}</span>
                      {{
                        scope.row.fieldName
                          ? scope.row.field + "(" + scope.row.fieldName + ")"
                          : scope.row.field
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="value" label="表单字段">
                    <template slot-scope="scope">
                      <template v-if="scope.row.required">
                        <el-select
                          v-model="scope.row.relationField"
                          placeholder="请选择表单字段"
                          clearable
                          filterable
                        >
                          <el-option
                            v-for="item in funcRequiredOptions"
                            :key="item.__vModel__"
                            :label="
                              item.__config__.label
                                ? item.__vModel__ +
                                  '(' +
                                  item.__config__.label +
                                  ')'
                                : item.__vModel__
                            "
                            :value="item.__vModel__"
                          >
                          </el-option>
                        </el-select>
                      </template>
                      <template v-else>
                        <el-select
                          v-model="scope.row.relationField"
                          placeholder="请选择表单字段"
                          clearable
                          filterable
                        >
                          <el-option
                            v-for="item in funcOptions"
                            :key="item.__vModel__"
                            :label="
                              item.__config__.label
                                ? item.__vModel__ +
                                  '(' +
                                  item.__config__.label +
                                  ')'
                                : item.__vModel__
                            "
                            :value="item.__vModel__"
                          >
                          </el-option>
                        </el-select>
                      </template>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-form>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="流程通知">
          <el-scrollbar class="config-scrollbar">
            <el-form :model="startForm" class="pd-10" label-position="top">
              <el-alert
                title="该通知设置配置外部第三方消息提醒，站内信系统默认发送"
                type="warning"
                :closable="false"
                show-icon
              />
              <el-form-item class="mt-10">
                <div slot="label">
                  流程待办
                  <el-tooltip content="流程处于等待的时候" placement="top">
                    <a class="el-icon-question"></a>
                  </el-tooltip>
                </div>
                <el-select
                  v-model="startForm.waitMsgConfig.on"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in noticeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <div
                style="margin-bottom: 18px"
                v-if="startForm.waitMsgConfig.on === 1"
              >
                <el-form-item label="消息模板">
                  <msg-dialog
                    :value="startForm.waitMsgConfig.msgId"
                    :title="startForm.waitMsgConfig.msgName"
                    @change="
                      onMsgChange('startForm', 'waitMsgConfig', arguments)
                    "
                  />
                </el-form-item>
                <el-form-item
                  label="参数设置"
                  style="margin-bottom: 0"
                ></el-form-item>
                <el-table :data="startForm.waitMsgConfig.templateJson">
                  <el-table-column
                    type="index"
                    width="50"
                    label="序号"
                    align="center"
                  />
                  <el-table-column prop="field" label="参数名称" width="200">
                    <template slot-scope="scope">
                      {{
                        scope.row.fieldName
                          ? scope.row.field + "(" + scope.row.fieldName + ")"
                          : scope.row.field
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="value" label="表单字段">
                    <template slot-scope="scope">
                      <el-select
                        v-model="scope.row.relationField"
                        placeholder="请选择表单字段"
                        clearable
                        filterable
                      >
                        <el-option
                          v-for="item in funcOptions"
                          :key="item.__vModel__"
                          :label="
                            item.__config__.label
                              ? item.__vModel__ +
                                '(' +
                                item.__config__.label +
                                ')'
                              : item.__vModel__
                          "
                          :value="item.__vModel__"
                        >
                        </el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <el-form-item>
                <div slot="label">
                  流程结束
                  <el-tooltip content="流程结束的时候" placement="top">
                    <a class="el-icon-question"></a>
                  </el-tooltip>
                </div>
                <el-select
                  v-model="startForm.endMsgConfig.on"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in noticeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <div
                style="margin-bottom: 18px"
                v-if="startForm.endMsgConfig.on === 1"
              >
                <el-form-item label="消息模板">
                  <msg-dialog
                    :value="startForm.endMsgConfig.msgId"
                    :title="startForm.endMsgConfig.msgName"
                    @change="
                      onMsgChange('startForm', 'endMsgConfig', arguments)
                    "
                  />
                </el-form-item>
                <el-form-item
                  label="参数设置"
                  style="margin-bottom: 0"
                ></el-form-item>
                <el-table :data="startForm.endMsgConfig.templateJson">
                  <el-table-column
                    type="index"
                    width="50"
                    label="序号"
                    align="center"
                  />
                  <el-table-column prop="field" label="参数名称" width="200">
                    <template slot-scope="scope">
                      {{
                        scope.row.fieldName
                          ? scope.row.field + "(" + scope.row.fieldName + ")"
                          : scope.row.field
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="value" label="表单字段">
                    <template slot-scope="scope">
                      <el-select
                        v-model="scope.row.relationField"
                        placeholder="请选择表单字段"
                        clearable
                        filterable
                      >
                        <el-option
                          v-for="item in funcOptions"
                          :key="item.__vModel__"
                          :label="
                            item.__config__.label
                              ? item.__vModel__ +
                                '(' +
                                item.__config__.label +
                                ')'
                              : item.__vModel__
                          "
                          :value="item.__vModel__"
                        >
                        </el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <el-form-item>
                <div slot="label">
                  节点同意
                  <el-tooltip
                    content="所有节点审核人同意的时候"
                    placement="top"
                  >
                    <a class="el-icon-question"></a>
                  </el-tooltip>
                </div>
                <el-select
                  v-model="startForm.approveMsgConfig.on"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in noticeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <div
                style="margin-bottom: 18px"
                v-if="startForm.approveMsgConfig.on === 1"
              >
                <el-form-item label="消息模板">
                  <msg-dialog
                    :value="startForm.approveMsgConfig.msgId"
                    :title="startForm.approveMsgConfig.msgName"
                    @change="
                      onMsgChange('startForm', 'approveMsgConfig', arguments)
                    "
                  />
                </el-form-item>
                <el-form-item
                  label="参数设置"
                  style="margin-bottom: 0"
                ></el-form-item>
                <el-table :data="startForm.approveMsgConfig.templateJson">
                  <el-table-column
                    type="index"
                    width="50"
                    label="序号"
                    align="center"
                  />
                  <el-table-column prop="field" label="参数名称" width="200">
                    <template slot-scope="scope">
                      {{
                        scope.row.fieldName
                          ? scope.row.field + "(" + scope.row.fieldName + ")"
                          : scope.row.field
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="value" label="表单字段">
                    <template slot-scope="scope">
                      <el-select
                        v-model="scope.row.relationField"
                        placeholder="请选择表单字段"
                        clearable
                        filterable
                      >
                        <el-option
                          v-for="item in funcOptions"
                          :key="item.__vModel__"
                          :label="
                            item.__config__.label
                              ? item.__vModel__ +
                                '(' +
                                item.__config__.label +
                                ')'
                              : item.__vModel__
                          "
                          :value="item.__vModel__"
                        >
                        </el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <el-form-item>
                <div slot="label">
                  节点驳回
                  <el-tooltip
                    content="所有节点审核人驳回的时候"
                    placement="top"
                  >
                    <a class="el-icon-question"></a>
                  </el-tooltip>
                </div>
                <el-select
                  v-model="startForm.rejectMsgConfig.on"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in noticeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <div
                style="margin-bottom: 18px"
                v-if="startForm.rejectMsgConfig.on === 1"
              >
                <el-form-item label="消息模板">
                  <msg-dialog
                    :value="startForm.rejectMsgConfig.msgId"
                    :title="startForm.rejectMsgConfig.msgName"
                    @change="
                      onMsgChange('startForm', 'rejectMsgConfig', arguments)
                    "
                  />
                </el-form-item>
                <el-form-item
                  label="参数设置"
                  style="margin-bottom: 0"
                ></el-form-item>
                <el-table :data="startForm.rejectMsgConfig.templateJson">
                  <el-table-column
                    type="index"
                    width="50"
                    label="序号"
                    align="center"
                  />
                  <el-table-column prop="field" label="参数名称" width="200">
                    <template slot-scope="scope">
                      {{
                        scope.row.fieldName
                          ? scope.row.field + "(" + scope.row.fieldName + ")"
                          : scope.row.field
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="value" label="表单字段">
                    <template slot-scope="scope">
                      <el-select
                        v-model="scope.row.relationField"
                        placeholder="请选择表单字段"
                        clearable
                        filterable
                      >
                        <el-option
                          v-for="item in funcOptions"
                          :key="item.__vModel__"
                          :label="
                            item.__config__.label
                              ? item.__vModel__ +
                                '(' +
                                item.__config__.label +
                                ')'
                              : item.__vModel__
                          "
                          :value="item.__vModel__"
                        >
                        </el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <el-form-item>
                <div slot="label">
                  节点抄送
                  <el-tooltip content="所有节点抄送的时候" placement="top">
                    <a class="el-icon-question"></a>
                  </el-tooltip>
                </div>
                <el-select
                  v-model="startForm.copyMsgConfig.on"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in noticeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <div v-if="startForm.copyMsgConfig.on === 1">
                <el-form-item label="消息模板">
                  <msg-dialog
                    :value="startForm.copyMsgConfig.msgId"
                    :title="startForm.copyMsgConfig.msgName"
                    @change="
                      onMsgChange('startForm', 'copyMsgConfig', arguments)
                    "
                  />
                </el-form-item>
                <el-form-item
                  label="参数设置"
                  style="margin-bottom: 0"
                ></el-form-item>
                <el-table :data="startForm.copyMsgConfig.templateJson">
                  <el-table-column
                    type="index"
                    width="50"
                    label="序号"
                    align="center"
                  />
                  <el-table-column prop="field" label="参数名称" width="200">
                    <template slot-scope="scope">
                      {{
                        scope.row.fieldName
                          ? scope.row.field + "(" + scope.row.fieldName + ")"
                          : scope.row.field
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="value" label="表单字段">
                    <template slot-scope="scope">
                      <el-select
                        v-model="scope.row.relationField"
                        placeholder="请选择表单字段"
                        clearable
                        filterable
                      >
                        <el-option
                          v-for="item in funcOptions"
                          :key="item.__vModel__"
                          :label="
                            item.__config__.label
                              ? item.__vModel__ +
                                '(' +
                                item.__config__.label +
                                ')'
                              : item.__vModel__
                          "
                          :value="item.__vModel__"
                        >
                        </el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-form>
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
    </section>
    <!-- 审批人 -->
    <section class="approver-pane" v-if="value && isApproverNode()">
      <el-tabs v-model="activeName" style="height: 100%">
        <el-tab-pane label="基础设置" name="config">
          <el-scrollbar class="config-scrollbar">
            <el-form label-position="top" :model="approverForm" class="pd-10">
              <el-form-item label="审批设置">
                <el-radio-group
                  v-model="approverForm.assigneeType"
                  @change="resetOrgColl"
                >
                  <el-radio
                    v-for="item in assigneeTypeOptions"
                    :label="item.value"
                    :key="item.value"
                    :disabled="item.disabled"
                    class="radio-item"
                    >{{ item.label }}
                  </el-radio>
                </el-radio-group>
                <div
                  v-if="approverForm.assigneeType === 1"
                  class="option-box-tip"
                >
                  发起者主管将作为审批人处理审批单
                </div>
                <div
                  v-if="approverForm.assigneeType === 2"
                  class="option-box-tip"
                >
                  发起者的部门主管将作为审批人处理审批单
                </div>
                <div
                  v-if="approverForm.assigneeType === 3"
                  class="option-box-tip"
                >
                  发起者自己将作为审批人处理审批单
                </div>
                <div
                  v-if="approverForm.assigneeType === 4"
                  class="option-box-tip"
                >
                  选择流程表单字段的值作为审批人
                </div>
                <div
                  v-if="approverForm.assigneeType === 5"
                  class="option-box-tip"
                >
                  设置审批人为审批流程中某个环节的审批人
                </div>
                <div
                  v-if="approverForm.assigneeType === 6"
                  class="option-box-tip"
                >
                  指定审批人处理审批单
                </div>
                <div
                  v-if="approverForm.assigneeType === 7"
                  class="option-box-tip"
                >
                  指定可供选择的候选人处理审批单
                </div>
                <div
                  v-if="approverForm.assigneeType === 9"
                  class="option-box-tip"
                >
                  通过第三方调用从目标服务中获取审批人
                </div>
                <el-form-item
                  label="发起者的"
                  style="margin-bottom: 0"
                  v-if="approverForm.assigneeType === 1"
                >
                  <el-select v-model="approverForm.managerLevel">
                    <el-option
                      v-for="item in 10"
                      :key="item"
                      :label="item === 1 ? '直属主管' : '第' + item + '级主管'"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="表单字段"
                  style="margin-bottom: 0"
                  v-if="approverForm.assigneeType === 4"
                >
                  <el-radio-group v-model="approverForm.formFieldType">
                    <el-radio :label="1">用户</el-radio>
                    <el-radio :label="2">部门</el-radio>
                  </el-radio-group>
                  <el-select
                    v-model="approverForm.formField"
                    placeholder="请选择字段"
                  >
                    <el-option
                      v-for="item in usedFormItems"
                      :key="item.__vModel__"
                      :label="item.__config__.label"
                      :value="item.__vModel__"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="审批节点"
                  style="margin-bottom: 0"
                  v-if="approverForm.assigneeType === 5"
                >
                  <el-select
                    v-model="approverForm.nodeId"
                    placeholder="请选择节点"
                  >
                    <el-option
                      v-for="item in nodeOptions"
                      :key="item.nodeId"
                      :label="item.properties.title"
                      :value="item.nodeId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  style="margin-bottom: 0"
                  v-if="approverForm.assigneeType === 9"
                >
                  <div slot="label">
                    请求路径
                    <el-tooltip
                      content="自带参数：taskId、taskNodeId"
                      placement="top"
                    >
                      <a class="el-icon-question"></a>
                    </el-tooltip>
                  </div>
                  <el-input
                    v-model="approverForm.getUserUrl"
                    placeholder="请输入接口地址"
                  >
                    <template slot="prepend">GET</template>
                  </el-input>
                </el-form-item>
                <el-form-item
                  style="margin-bottom: 0"
                  v-if="
                    approverForm.assigneeType === 6 ||
                    approverForm.assigneeType === 7
                  "
                >
                  <org-select
                    ref="approver-role-org"
                    type="role"
                    title="添加角色"
                    buttonType="button"
                    v-model="approverForm.approverRole"
                    class="mb-10"
                  />
                  <org-select
                    ref="approver-position-org"
                    buttonType="button"
                    v-model="approverForm.approverPos"
                    title="添加岗位"
                    type="position"
                    class="mb-10"
                  />
                  <org-select
                    ref="approver-user-org"
                    title="添加用户"
                    buttonType="button"
                    v-model="approverForm.approvers"
                  />
                </el-form-item>
              </el-form-item>
              <el-form-item label="审批方式">
                <el-radio v-model="approverForm.counterSign" :label="0">
                  或签（一名审批人同意或驳回即可）</el-radio
                >
                <br />
                <el-radio v-model="approverForm.counterSign" :label="1">
                  会签（无序会签，当审批达到会签比例时，则该审批通过）</el-radio
                >
              </el-form-item>
              <el-form-item label="会签比例" v-if="approverForm.counterSign">
                <el-select v-model="approverForm.countersignRatio">
                  <el-option
                    v-for="item in 10"
                    :key="item * 10"
                    :label="item * 10 + '%'"
                    :value="item * 10"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="驳回后提交设置">
                <el-radio
                  v-model="approverForm.rejectAuditType"
                  label="0"
                  @change="setRejectStep"
                >
                  重新审批
                  <el-tooltip
                    content="驳回到发起人，一级一级审批"
                    placement="top"
                  >
                    <i class="el-icon-warning-outline"></i>
                  </el-tooltip>
                </el-radio>
                <el-radio
                  v-model="approverForm.rejectAuditType"
                  label="1"
                  @change="setRejectStep"
                >
                  从当前节点审批
                  <el-tooltip
                    content="驳回到发起人，从当前节点开始审批"
                    placement="top"
                  >
                    <i class="el-icon-warning-outline"></i>
                  </el-tooltip>
                </el-radio>
                <el-radio v-model="approverForm.rejectAuditType" label="2">
                  自定义审批
                  <el-tooltip content="审批人自选驳回的方式" placement="top">
                    <i class="el-icon-warning-outline"></i>
                  </el-tooltip>
                </el-radio>
              </el-form-item>
              <el-form-item label="设置驳回到的节点">
                <el-select
                  v-model="approverForm.rejectStep"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in rejectStepOptions"
                    :key="item.nodeId"
                    :label="item.properties.title"
                    :value="item.nodeId"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="进度设置">
                <el-select v-model="approverForm.progress" placeholder="请选择">
                  <el-option
                    v-for="item in progressOptions"
                    :key="item"
                    :label="item + '%'"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="抄送设置">
                <org-select
                  ref="approver-copy-role-org"
                  type="role"
                  v-model="approverForm.circulateRole"
                  title="添加角色"
                  class="mb-10"
                  buttonType="button"
                />
                <org-select
                  ref="approver-copy-position-org"
                  buttonType="button"
                  v-model="approverForm.circulatePosition"
                  title="添加岗位"
                  type="position"
                  class="mb-10"
                />
                <org-select
                  ref="approver-copy-user-org"
                  buttonType="button"
                  v-model="approverForm.circulateUser"
                  title="添加用户"
                  class="mb-10"
                />
                <el-checkbox v-model="approverForm.isCustomCopy"
                  >允许自选抄送人</el-checkbox
                >
              </el-form-item>
            </el-form>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="高级设置" name="senior">
          <el-scrollbar class="config-scrollbar">
            <el-form label-position="top" class="pd-10">
              <el-form-item label="操作设置">
                <div class="per-cell">
                  <el-checkbox v-model="approverForm.hasSaveBtn"
                    >暂存</el-checkbox
                  >
                  <el-input v-model="approverForm.saveBtnText" />
                </div>
                <div class="per-cell">
                  <el-checkbox v-model="approverForm.hasAuditBtn"
                    >同意</el-checkbox
                  >
                  <el-input v-model="approverForm.auditBtnText" />
                </div>
                <div class="per-cell">
                  <el-checkbox v-model="approverForm.hasRejectBtn"
                    >驳回</el-checkbox
                  >
                  <el-input v-model="approverForm.rejectBtnText" />
                </div>
                <div class="per-cell">
                  <el-checkbox v-model="approverForm.hasRevokeBtn"
                    >撤回</el-checkbox
                  >
                  <el-input v-model="approverForm.revokeBtnText" />
                </div>
                <div class="per-cell">
                  <el-checkbox v-model="approverForm.hasTransferBtn"
                    >转审</el-checkbox
                  >
                  <el-input v-model="approverForm.transferBtnText" />
                </div>
                <div class="per-cell">
                  <el-checkbox v-model="approverForm.hasPrintBtn"
                    >打印</el-checkbox
                  >
                  <el-input v-model="approverForm.printBtnText" />
                </div>
                <div class="per-cell" v-if="approverForm.hasPrintBtn">
                  <p style="width: 112px"></p>
                  <JsbosTreeSelect
                    :options="printTplList"
                    v-model="approverForm.printId"
                    placeholder="请选择打印模板"
                    lastLevel
                    clearable
                  ></JsbosTreeSelect>
                </div>
                <div class="per-cell">
                  <el-checkbox v-model="approverForm.hasFreeApprover"
                    >加签
                    <el-tooltip
                      content="允许在审批单中增加临时审批人"
                      placement="top"
                    >
                      <a class="el-icon-question"></a>
                    </el-tooltip>
                  </el-checkbox>
                  <el-input v-model="approverForm.freeApproverBtnText" />
                </div>
              </el-form-item>

              <el-form-item label="">
                <div slot="label">
                  自动同意
                  <el-tooltip
                    content="当前审批节点表单必填字段为空工单流转时不做校验；下一审批节点设置候选人员、选择分支、异常节点时当前审批节点规则失效"
                    placement="top"
                  >
                    <a class="el-icon-question"></a>
                  </el-tooltip>
                </div>
                <el-checkbox v-model="approverForm.isAutoAgree"
                  >同意
                </el-checkbox>
                <div v-if="approverForm.isAutoAgree">
                  <el-select
                    v-model="approverForm.agreeRules"
                    multiple
                    clearable
                    placeholder="请选择自动同意规则"
                  >
                    <el-option
                      v-for="item in agreeRuleList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-form-item>
              <el-form-item label="签名设置">
                <div slot="label">
                  签名设置
                  <el-tooltip content="审批人同意时需签名" placement="top">
                    <a class="el-icon-question"></a>
                  </el-tooltip>
                </div>
                <el-checkbox v-model="approverForm.hasSign"
                  >手写签名</el-checkbox
                >
              </el-form-item>
              <!-- <el-form-item label="超时设置">
                <el-switch v-model="approverForm.timeoutConfig.on" class="mr-10" />
                <template v-if="approverForm.timeoutConfig.on">
                  <el-input-number v-model="approverForm.timeoutConfig.quantity"
                    controls-position="right" :min="1" class="mr-10" />
                  <el-select v-model="approverForm.timeoutConfig.type" class="timeout-select mr-10">
                    <el-option label="天" value="day"></el-option>
                    <el-option label="小时" value="hour"></el-option>
                    <el-option label="分钟" value="minute"></el-option>
                  </el-select>
                  <el-radio-group v-model="approverForm.timeoutConfig.handler">
                    <el-radio :label="1">同意</el-radio>
                    <el-radio :label="2">驳回</el-radio>
                  </el-radio-group>
                </template>
              </el-form-item> -->
              <el-form-item label="说明">
                <el-input
                  v-model="approverForm.description"
                  type="textarea"
                  :rows="3"
                ></el-input>
              </el-form-item>
            </el-form>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="表单权限" name="formAuth">
          <div class="form-auth-table">
            <el-table
              :data="getFormOperates()"
              class="jsbos-common-table"
              size="mini"
              height="100%"
            >
              <el-table-column
                prop="name"
                label="表单字段"
                align="left"
              ></el-table-column>
              <el-table-column
                prop="write"
                label="操作"
                align="center"
                width="250"
              >
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.read">查看</el-checkbox>
                  <el-checkbox v-model="scope.row.write">编辑</el-checkbox>
                  <el-checkbox
                    v-model="scope.row.required"
                    :disabled="scope.row.requiredDisabled"
                  >
                    必填</el-checkbox
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="节点事件">
          <el-scrollbar class="config-scrollbar">
            <el-form :model="approverForm" class="pd-10" label-position="left">
              <el-alert
                title="开启后可配置触发事件同时进行参数赋值"
                type="warning"
                :closable="false"
                show-icon
              />
              <el-form-item label="同意事件" class="mt-10">
                <el-switch v-model="approverForm.approveFuncConfig.on" />
              </el-form-item>

              <div
                style="margin-bottom: 18px"
                v-if="approverForm.approveFuncConfig.on"
              >
                <el-form-item label="任务类型" prop="approveType">
                  <el-radio-group
                    v-model="approverForm.approveType"
                    @change="onApproveTypeChange"
                  >
                    <el-radio label="1">API操作</el-radio>
                    <el-radio label="2"
                      >本地任务
                      <el-tooltip
                        content="获取在程序中事先写好的本地方法"
                        placement="top"
                      >
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </el-radio>
                    <el-radio label="3"
                      >同步配置
                      <el-tooltip content="同步发起流程配置" placement="top">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item
                  label="接口设置"
                  style="margin-bottom: 0"
                  v-if="approverForm.approveType == '1'"
                ></el-form-item>
                <el-form-item
                  label-width="0"
                  v-if="approverForm.approveType == '1'"
                >
                  <interface-dialog
                    :value="approverForm.approveFuncConfig.interfaceId"
                    :title="approverForm.approveFuncConfig.interfaceName"
                    @change="
                      onFuncChange(
                        'approverForm',
                        'approveFuncConfig',
                        arguments
                      )
                    "
                  />
                </el-form-item>

                <el-form-item
                  label="方法选择"
                  prop="approverForm.approveFuncConfig.flowCallBackMethod"
                  v-if="approverForm.approveType == '2'"
                >
                  <el-tooltip
                    content="获取流程的本地方法"
                    placement="top"
                    v-if="approverForm.approveType == '2'"
                  >
                    <i class="el-icon-warning-outline"></i>
                  </el-tooltip>
                  <el-select
                    v-model="approverForm.approveFuncConfig.flowCallBackMethod"
                    placeholder="请选择"
                    @change="onLocalHostTaskIdChange"
                    clearable
                  >
                    <el-option
                      v-for="item in taskOptions"
                      :key="item.id"
                      :label="item.fullName"
                      :value="item.id"
                    />
                  </el-select>
                  <div
                    class="el-icon-warning-outline"
                    style="font-size: 12px; color: #a5a5a5"
                  >
                    {{ approverForm.approveFuncConfig.flowCallBackMethod }}
                  </div>
                </el-form-item>

                <el-form-item
                  label="参数设置"
                  style="margin-bottom: 0"
                  v-if="approverForm.approveType == '1'"
                ></el-form-item>
                <el-table
                  :data="approverForm.approveFuncConfig.templateJson"
                  v-if="approverForm.approveType == '1'"
                >
                  <el-table-column
                    type="index"
                    width="50"
                    label="序号"
                    align="center"
                  />
                  <el-table-column prop="field" label="参数名称" width="200">
                    <template slot-scope="scope">
                      <span class="required-sign">{{
                        scope.row.required ? "*" : ""
                      }}</span>
                      {{
                        scope.row.fieldName
                          ? scope.row.field + "(" + scope.row.fieldName + ")"
                          : scope.row.field
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="value" label="表单字段">
                    <template slot-scope="scope">
                      <template v-if="scope.row.required">
                        <el-select
                          v-model="scope.row.relationField"
                          placeholder="请选择表单字段"
                          clearable
                          filterable
                        >
                          <el-option
                            v-for="item in funcRequiredOptions"
                            :key="item.__vModel__"
                            :label="
                              item.__config__.label
                                ? item.__vModel__ +
                                  '(' +
                                  item.__config__.label +
                                  ')'
                                : item.__vModel__
                            "
                            :value="item.__vModel__"
                          >
                          </el-option>
                        </el-select>
                      </template>
                      <template v-else>
                        <el-select
                          v-model="scope.row.relationField"
                          placeholder="请选择表单字段"
                          clearable
                          filterable
                        >
                          <el-option
                            v-for="item in funcOptions"
                            :key="item.__vModel__"
                            :label="
                              item.__config__.label
                                ? item.__vModel__ +
                                  '(' +
                                  item.__config__.label +
                                  ')'
                                : item.__vModel__
                            "
                            :value="item.__vModel__"
                          >
                          </el-option>
                        </el-select>
                      </template>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <el-form-item label="驳回事件">
                <el-switch v-model="approverForm.rejectFuncConfig.on" />
              </el-form-item>

              <div
                style="margin-bottom: 18px"
                v-if="approverForm.rejectFuncConfig.on"
              >
                <el-form-item label="任务类型" prop="rejectType">
                  <el-radio-group
                    v-model="approverForm.rejectType"
                    @change="onRejectTypeChange"
                  >
                    <el-radio label="1">API操作</el-radio>
                    <el-radio label="2"
                      >本地任务
                      <el-tooltip
                        content="获取在程序中事先写好的本地方法"
                        placement="top"
                      >
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </el-radio>
                    <el-radio label="3"
                      >同步配置
                      <el-tooltip content="同步发起流程配置" placement="top">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item
                  label="接口设置"
                  style="margin-bottom: 0"
                  v-if="approverForm.rejectType == '1'"
                ></el-form-item>
                <el-form-item
                  label-width="0"
                  v-if="approverForm.rejectType == '1'"
                >
                  <interface-dialog
                    :value="approverForm.rejectFuncConfig.interfaceId"
                    :title="approverForm.rejectFuncConfig.interfaceName"
                    @change="
                      onFuncChange(
                        'approverForm',
                        'rejectFuncConfig',
                        arguments
                      )
                    "
                  />
                </el-form-item>

                <el-form-item
                  label="方法选择"
                  prop="approverForm.rejectFuncConfig.flowCallBackMethod"
                  v-if="approverForm.rejectType == '2'"
                >
                  <el-tooltip
                    content="获取流程的本地方法"
                    placement="top"
                    v-if="approverForm.rejectType == '2'"
                  >
                    <i class="el-icon-warning-outline"></i>
                  </el-tooltip>
                  <el-select
                    v-model="approverForm.rejectFuncConfig.flowCallBackMethod"
                    placeholder="请选择"
                    @change="onLocalHostTaskIdChange"
                    clearable
                  >
                    <el-option
                      v-for="item in taskOptions"
                      :key="item.id"
                      :label="item.fullName"
                      :value="item.id"
                    />
                  </el-select>
                  <div
                    class="el-icon-warning-outline"
                    style="font-size: 12px; color: #a5a5a5"
                  >
                    {{ approverForm.rejectFuncConfig.flowCallBackMethod }}
                  </div>
                </el-form-item>
                <el-form-item
                  label="参数设置"
                  style="margin-bottom: 0"
                  v-if="approverForm.rejectType == '1'"
                ></el-form-item>
                <el-table
                  :data="approverForm.rejectFuncConfig.templateJson"
                  v-if="approverForm.rejectType == '1'"
                >
                  <el-table-column
                    type="index"
                    width="50"
                    label="序号"
                    align="center"
                  />
                  <el-table-column prop="field" label="参数名称" width="200">
                    <template slot-scope="scope">
                      <span class="required-sign">{{
                        scope.row.required ? "*" : ""
                      }}</span>
                      {{
                        scope.row.fieldName
                          ? scope.row.field + "(" + scope.row.fieldName + ")"
                          : scope.row.field
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="value" label="表单字段">
                    <template slot-scope="scope">
                      <template v-if="scope.row.required">
                        <el-select
                          v-model="scope.row.relationField"
                          placeholder="请选择表单字段"
                          clearable
                          filterable
                        >
                          <el-option
                            v-for="item in funcRequiredOptions"
                            :key="item.__vModel__"
                            :label="
                              item.__config__.label
                                ? item.__vModel__ +
                                  '(' +
                                  item.__config__.label +
                                  ')'
                                : item.__vModel__
                            "
                            :value="item.__vModel__"
                          >
                          </el-option>
                        </el-select>
                      </template>
                      <template v-else>
                        <el-select
                          v-model="scope.row.relationField"
                          placeholder="请选择表单字段"
                          clearable
                          filterable
                        >
                          <el-option
                            v-for="item in funcOptions"
                            :key="item.__vModel__"
                            :label="
                              item.__config__.label
                                ? item.__vModel__ +
                                  '(' +
                                  item.__config__.label +
                                  ')'
                                : item.__vModel__
                            "
                            :value="item.__vModel__"
                          >
                          </el-option>
                        </el-select>
                      </template>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <el-form-item label="撤回事件">
                <el-switch v-model="approverForm.recallFuncConfig.on" />
              </el-form-item>

              <div v-if="approverForm.recallFuncConfig.on">
                <el-form-item label="任务类型" prop="recallType">
                  <el-radio-group
                    v-model="approverForm.recallType"
                    @change="onRecallTypeChange"
                  >
                    <el-radio label="1">API操作</el-radio>
                    <el-radio label="2"
                      >本地任务
                      <el-tooltip
                        content="获取在程序中事先写好的本地方法"
                        placement="top"
                      >
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </el-radio>
                    <el-radio label="3"
                      >同步配置
                      <el-tooltip content="同步发起流程配置" placement="top">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item
                  label="接口设置"
                  style="margin-bottom: 0"
                  v-if="approverForm.recallType == '1'"
                ></el-form-item>
                <el-form-item
                  label-width="0"
                  v-if="approverForm.recallType == '1'"
                >
                  <interface-dialog
                    :value="approverForm.recallFuncConfig.interfaceId"
                    :title="approverForm.recallFuncConfig.interfaceName"
                    @change="
                      onFuncChange(
                        'approverForm',
                        'recallFuncConfig',
                        arguments
                      )
                    "
                  />
                </el-form-item>

                <el-form-item
                  label="方法选择"
                  prop="approverForm.recallFuncConfig.flowCallBackMethod"
                  v-if="approverForm.recallType == '2'"
                >
                  <el-tooltip
                    content="获取流程的本地方法"
                    placement="top"
                    v-if="approverForm.recallType == '2'"
                  >
                    <i class="el-icon-warning-outline"></i>
                  </el-tooltip>
                  <el-select
                    v-model="approverForm.recallFuncConfig.flowCallBackMethod"
                    placeholder="请选择"
                    @change="onLocalHostTaskIdChange"
                    clearable
                  >
                    <el-option
                      v-for="item in taskOptions"
                      :key="item.id"
                      :label="item.fullName"
                      :value="item.id"
                    />
                  </el-select>
                  <div
                    class="el-icon-warning-outline"
                    style="font-size: 12px; color: #a5a5a5"
                  >
                    {{ approverForm.approveFuncConfig.flowCallBackMethod }}
                  </div>
                </el-form-item>
                <el-form-item
                  label="参数设置"
                  style="margin-bottom: 0"
                  v-if="approverForm.recallType == '1'"
                ></el-form-item>
                <el-table
                  :data="approverForm.recallFuncConfig.templateJson"
                  v-if="approverForm.recallType == '1'"
                >
                  <el-table-column
                    type="index"
                    width="50"
                    label="序号"
                    align="center"
                  />
                  <el-table-column prop="field" label="参数名称" width="200">
                    <template slot-scope="scope">
                      <span class="required-sign">{{
                        scope.row.required ? "*" : ""
                      }}</span>
                      {{
                        scope.row.fieldName
                          ? scope.row.field + "(" + scope.row.fieldName + ")"
                          : scope.row.field
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="value" label="表单字段">
                    <template slot-scope="scope">
                      <template v-if="scope.row.required">
                        <el-select
                          v-model="scope.row.relationField"
                          placeholder="请选择表单字段"
                          clearable
                          filterable
                        >
                          <el-option
                            v-for="item in funcRequiredOptions"
                            :key="item.__vModel__"
                            :label="
                              item.__config__.label
                                ? item.__vModel__ +
                                  '(' +
                                  item.__config__.label +
                                  ')'
                                : item.__vModel__
                            "
                            :value="item.__vModel__"
                          >
                          </el-option>
                        </el-select>
                      </template>
                      <template v-else>
                        <el-select
                          v-model="scope.row.relationField"
                          placeholder="请选择表单字段"
                          clearable
                          filterable
                        >
                          <el-option
                            v-for="item in funcOptions"
                            :key="item.__vModel__"
                            :label="
                              item.__config__.label
                                ? item.__vModel__ +
                                  '(' +
                                  item.__config__.label +
                                  ')'
                                : item.__vModel__
                            "
                            :value="item.__vModel__"
                          >
                          </el-option>
                        </el-select>
                      </template>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-form>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="节点通知">
          <el-scrollbar class="config-scrollbar">
            <el-form :model="approverForm" class="pd-10" label-position="top">
              <el-alert
                title="该通知设置配置外部第三方消息提醒，站内信系统默认发送"
                type="warning"
                :closable="false"
                show-icon
              />
              <el-form-item class="mt-10">
                <div slot="label">
                  节点同意
                  <el-tooltip
                    content="当前节点审核人同意的时候"
                    placement="top"
                  >
                    <a class="el-icon-question"></a>
                  </el-tooltip>
                </div>
                <el-select
                  v-model="approverForm.approveMsgConfig.on"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in nodeNoticeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <div
                style="margin-bottom: 18px"
                v-if="approverForm.approveMsgConfig.on === 1"
              >
                <el-form-item label="消息模板">
                  <msg-dialog
                    :value="approverForm.approveMsgConfig.msgId"
                    :title="approverForm.approveMsgConfig.msgName"
                    @change="
                      onMsgChange('approverForm', 'approveMsgConfig', arguments)
                    "
                  />
                </el-form-item>
                <el-form-item
                  label="参数设置"
                  style="margin-bottom: 0"
                ></el-form-item>
                <el-table :data="approverForm.approveMsgConfig.templateJson">
                  <el-table-column
                    type="index"
                    width="50"
                    label="序号"
                    align="center"
                  />
                  <el-table-column prop="field" label="参数名称" width="200">
                    <template slot-scope="scope">
                      {{
                        scope.row.fieldName
                          ? scope.row.field + "(" + scope.row.fieldName + ")"
                          : scope.row.field
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="value" label="表单字段">
                    <template slot-scope="scope">
                      <el-select
                        v-model="scope.row.relationField"
                        placeholder="请选择表单字段"
                        clearable
                        filterable
                      >
                        <el-option
                          v-for="item in funcOptions"
                          :key="item.__vModel__"
                          :label="
                            item.__config__.label
                              ? item.__vModel__ +
                                '(' +
                                item.__config__.label +
                                ')'
                              : item.__vModel__
                          "
                          :value="item.__vModel__"
                        >
                        </el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <el-form-item>
                <div slot="label">
                  节点驳回
                  <el-tooltip
                    content="当前节点审核人驳回的时候"
                    placement="top"
                  >
                    <a class="el-icon-question"></a>
                  </el-tooltip>
                </div>
                <el-select
                  v-model="approverForm.rejectMsgConfig.on"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in nodeNoticeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <div
                style="margin-bottom: 18px"
                v-if="approverForm.rejectMsgConfig.on === 1"
              >
                <el-form-item label="消息模板">
                  <msg-dialog
                    :value="approverForm.rejectMsgConfig.msgId"
                    :title="approverForm.rejectMsgConfig.msgName"
                    @change="
                      onMsgChange('approverForm', 'rejectMsgConfig', arguments)
                    "
                  />
                </el-form-item>
                <el-form-item
                  label="参数设置"
                  style="margin-bottom: 0"
                ></el-form-item>
                <el-table :data="approverForm.rejectMsgConfig.templateJson">
                  <el-table-column
                    type="index"
                    width="50"
                    label="序号"
                    align="center"
                  />
                  <el-table-column prop="field" label="参数名称" width="200">
                    <template slot-scope="scope">
                      {{
                        scope.row.fieldName
                          ? scope.row.field + "(" + scope.row.fieldName + ")"
                          : scope.row.field
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="value" label="表单字段">
                    <template slot-scope="scope">
                      <el-select
                        v-model="scope.row.relationField"
                        placeholder="请选择表单字段"
                        clearable
                        filterable
                      >
                        <el-option
                          v-for="item in funcOptions"
                          :key="item.__vModel__"
                          :label="
                            item.__config__.label
                              ? item.__vModel__ +
                                '(' +
                                item.__config__.label +
                                ')'
                              : item.__vModel__
                          "
                          :value="item.__vModel__"
                        >
                        </el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <el-form-item>
                <div slot="label">
                  节点抄送
                  <el-tooltip content="当前节点抄送的时候" placement="top">
                    <a class="el-icon-question"></a>
                  </el-tooltip>
                </div>
                <el-select
                  v-model="approverForm.copyMsgConfig.on"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in nodeNoticeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <div v-if="approverForm.copyMsgConfig.on === 1">
                <el-form-item label="消息模板">
                  <msg-dialog
                    :value="approverForm.copyMsgConfig.msgId"
                    :title="approverForm.copyMsgConfig.msgName"
                    @change="
                      onMsgChange('approverForm', 'copyMsgConfig', arguments)
                    "
                  />
                </el-form-item>
                <el-form-item
                  label="参数设置"
                  style="margin-bottom: 0"
                ></el-form-item>
                <el-table :data="approverForm.copyMsgConfig.templateJson">
                  <el-table-column
                    type="index"
                    width="50"
                    label="序号"
                    align="center"
                  />
                  <el-table-column prop="field" label="参数名称" width="200">
                    <template slot-scope="scope">
                      {{
                        scope.row.fieldName
                          ? scope.row.field + "(" + scope.row.fieldName + ")"
                          : scope.row.field
                      }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="value" label="表单字段">
                    <template slot-scope="scope">
                      <el-select
                        v-model="scope.row.relationField"
                        placeholder="请选择表单字段"
                        clearable
                        filterable
                      >
                        <el-option
                          v-for="item in funcOptions"
                          :key="item.__vModel__"
                          :label="
                            item.__config__.label
                              ? item.__vModel__ +
                                '(' +
                                item.__config__.label +
                                ')'
                              : item.__vModel__
                          "
                          :value="item.__vModel__"
                        >
                        </el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-form>
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
    </section>
    <div class="actions">
      <div>
        <el-button
          type="primary"
          size="small"
          @click="toggleAllReadSelections"
          v-show="value && isStartNode() && subActiveName == 'formAuth'"
          >{{ quanxuanText }}</el-button
        >
        <el-button
          type="primary"
          size="small"
          @click="toggleAllReadSelections"
          v-show="value && isApproverNode() && activeName == 'formAuth'"
          >{{ quanxuanText }}</el-button
        >
      </div>
      <div>
        <el-button size="small" @click="cancel">取消</el-button>
        <el-button size="small" type="primary" @click="confirm">确定</el-button>
      </div>
    </div>
    <el-dialog
      title="数据传递"
      :close-on-click-modal="false"
      :visible.sync="ruleVisible"
      class="jsbos-dialog jsbos-dialog_center rule-dialog"
      lock-scroll
      append-to-body
      width="700px"
    >
      <div class="option-box-tip">
        当父流程流转到子流程时，将对应的字段赋值给子流程
      </div>
      <el-row
        :gutter="10"
        v-for="(item, i) in assignList"
        :key="i"
        class="mb-10"
      >
        <el-col :span="2" class="rule-cell">父流程</el-col>
        <el-col :span="7" class="rule-cell">
          <el-select v-model="item.parentField" placeholder="请选择字段">
            <el-option
              v-for="item in usedFormItems"
              :key="item.__vModel__"
              :label="item.__config__.label"
              :value="item.__vModel__"
            />
          </el-select>
        </el-col>
        <el-col :span="4" class="rule-cell mid">赋值给</el-col>
        <el-col :span="2" class="rule-cell">子流程</el-col>
        <el-col :span="7" class="rule-cell">
          <el-select v-model="item.childField" placeholder="请选择字段">
            <el-option
              v-for="item in childFieldOptions"
              :key="item.vmodel"
              :label="item.label"
              :value="item.vmodel"
            />
          </el-select>
        </el-col>
        <el-col :span="2" class="rule-cell">
          <el-button type="danger" icon="el-icon-close" @click="delRule(i)">
          </el-button>
        </el-col>
      </el-row>
      <div class="table-actions" @click="addRule">
        <el-button type="text" icon="el-icon-plus">新增规则</el-button>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ruleVisible = false">取消</el-button>
        <el-button type="primary" @click="saveRule">确定</el-button>
      </span>
    </el-dialog>
  </el-drawer>
</template>
<script>
import {
  FlowEngineSelector,
  getFormDataFields,
  getFlowCallBackMethods,
} from "@/api/workFlow/FlowEngine";
import { NodeUtils } from "../flow-card/util.js";
import { getDrawingList } from "@/components/Generator/utils/db";
import OrgSelect from "../org-select";
import MsgDialog from "./msgDialog";
import InterfaceDialog from "./InterfaceDialog";
const requiredDisabled = (keyName) => {
  return [
    "billRule",
    "createUser",
    "createTime",
    "modifyTime",
    "modifyUser",
    "currPosition",
    "currOrganize",
    "table",
  ].includes(keyName);
};
const getDataType = (data) => {
  if (!data.__config__ || !data.__config__.keyName) return "";
  const keyName = data.__config__.keyName;
  if (["numInput", "date", "rate", "slider"].includes(keyName)) {
    return "number";
  } else if (
    [
      "checkbox",
      "uploadFz",
      "uploadImg",
      "cascader",
      "comSelect",
      "address",
    ].includes(keyName)
  ) {
    return "array";
  } else if (
    ["select", "depSelect", "posSelect", "userSelect", "treeSelect"].includes(
      keyName
    )
  ) {
    if (data.multiple) return "array";
  }
  return "";
};
const defaultStartForm = {
  executeType: "1",
  endType: "1",
  flowRecallType: "1",
  initFuncConfig: {
    on: false,
    interfaceId: "",
    interfaceName: "",
    flowCallBackMethod: "",
    templateJson: [],
  },
  endFuncConfig: {
    on: false,
    interfaceId: "",
    interfaceName: "",
    flowCallBackMethod: "",
    templateJson: [],
  },
  flowRecallFuncConfig: {
    on: false,
    interfaceId: "",
    interfaceName: "",
    flowCallBackMethod: "",
    templateJson: [],
  },
  waitMsgConfig: {
    on: 0,
    msgId: "",
    msgName: "",
    templateJson: [],
  },
  endMsgConfig: {
    on: 0,
    msgId: "",
    msgName: "",
    templateJson: [],
  },
  approveMsgConfig: {
    on: 0,
    msgId: "",
    msgName: "",
    templateJson: [],
  },
  rejectMsgConfig: {
    on: 0,
    msgId: "",
    msgName: "",
    templateJson: [],
  },
  copyMsgConfig: {
    on: 0,
    msgId: "",
    msgName: "",
    templateJson: [],
  },
  hasSubmitBtn: true,
  submitBtnText: "提 交",
  hasSaveBtn: true,
  saveBtnText: "暂 存",
  hasPressBtn: true,
  pressBtnText: "催 办",
  hasRevokeBtn: true,
  revokeBtnText: "撤 回",
  hasPrintBtn: false,
  printBtnText: "打 印",
  printId: "",
  isComment: false,
  isBatchApproval: false,
  isSummary: false,
  summaryType: 0,
  formOperates: [],
  taskOptions: [],
};
const defaultSubFlowForm = {
  formFieldType: 1, // 表单字段审核方式的类型(1-用户 2-部门)
  initiateType: 6,
  managerLevel: 1,
  formField: "",
  nodeId: "",
  getUserUrl: "",
  initiator: [],
  initiatePos: [],
  initiateRole: [],
  flowId: "",
  assignList: [],
  launchMsgConfig: {
    on: 0,
    msgId: "",
    msgName: "",
    templateJson: [],
  },
  isAsync: false,
};
const defaultApproverForm = {
  approveType: "1",
  recallType: "1",
  rejectType: "1",
  formFieldType: 1, // 表单字段审核方式的类型(1-用户 2-部门)
  approvers: [], // 审批人集合
  approverPos: [], // 审批岗位集合
  approverRole: [], // 审批角色集合
  assigneeType: 6, // 指定审批人
  userType: "role", //role,position,user
  formOperates: [], // 表单权限集合
  circulateRole: [], // 抄送角色集合
  circulatePosition: [], // 抄送岗位集合
  circulateUser: [], // 抄送人集合
  isCustomCopy: true,
  progress: "50", // 进度
  rejectStep: "0", // 驳回步骤
  description: "", // 节点描述
  managerLevel: 1,
  countersignRatio: 100,
  formField: "",
  nodeId: "",
  getUserUrl: "",
  counterSign: 0,
  rejectAuditType: "0",
  noApproverHandler: true,
  hasFreeApprover: true,
  freeApproverBtnText: "加 签",
  hasSaveBtn: true,
  saveBtnText: "暂 存",
  hasAuditBtn: true,
  auditBtnText: "通 过",
  hasRejectBtn: true,
  rejectBtnText: "驳 回",
  hasRevokeBtn: true,
  revokeBtnText: "撤 回",
  hasTransferBtn: true,
  transferBtnText: "转 审",
  hasPrintBtn: false,
  printBtnText: "打 印",
  printId: "", // 打印模板
  hasSign: false,
  isAutoAgree: false,
  agreeRules: "",
  timeoutConfig: {
    on: false,
    quantity: 1,
    type: "day",
    handler: 1,
  },
  approveMsgConfig: {
    on: 2,
    msgId: "",
    msgName: "",
    templateJson: [],
  },
  rejectMsgConfig: {
    on: 2,
    msgId: "",
    msgName: "",
    templateJson: [],
  },
  copyMsgConfig: {
    on: 2,
    msgId: "",
    msgName: "",
    templateJson: [],
  },
  approveFuncConfig: {
    on: false,
    interfaceId: "",
    interfaceName: "",
    flowCallBackMethod: "",
    templateJson: [],
  },
  rejectFuncConfig: {
    on: false,
    interfaceId: "",
    interfaceName: "",
    flowCallBackMethod: "",
    templateJson: [],
  },
  recallFuncConfig: {
    on: false,
    interfaceId: "",
    interfaceName: "",
    flowCallBackMethod: "",
    templateJson: [],
  },
};
const defaultStep = [
  {
    nodeId: "0",
    properties: { title: "流程发起" },
  },
  {
    nodeId: "1",
    properties: { title: "上级审批节点" },
  },
  {
    nodeId: "2",
    properties: { title: "自选审批节点" },
  },
];
const typeOptions = [
  {
    label: "指定成员",
    value: 6,
  },
  {
    label: "发起者本人",
    value: 3,
  },
  {
    label: "发起者主管",
    value: 1,
  },
  {
    label: "部门主管",
    value: 2,
  },
  {
    label: "表单变量",
    value: 4,
  },
  {
    label: "流程环节",
    value: 5,
  },
  {
    label: "接口服务",
    value: 9,
  },
];
const assigneeTypeOptions = [
  ...typeOptions,
  {
    label: "候选人员",
    value: 7,
  },
];
const noticeOptions = [
  {
    value: 1,
    label: "自定义",
  },
  {
    value: 0,
    label: "关闭",
  },
];
const nodeNoticeOptions = [
  {
    value: 2,
    label: "同步发起配置",
  },
  ...noticeOptions,
];
const systemFieldOptions = [
  {
    __config__: {
      label: "流程ID",
      required: true,
    },
    __vModel__: "jsbosFlowId",
  },
  {
    __config__: {
      label: "任务ID",
      required: true,
    },
    __vModel__: "jsbosTaskId",
  },
  {
    __config__: {
      label: "节点ID",
      required: true,
    },
    __vModel__: "jsbosTaskNodeId",
  },
  {
    __config__: {
      label: "流程名称",
      required: true,
    },
    __vModel__: "jsbosFlowFullName",
  },
  {
    __config__: {
      label: "任务标题",
      required: true,
    },
    __vModel__: "jsbosTaskFullName",
  },
  {
    __config__: {
      label: "发起用户ID",
      required: true,
    },
    __vModel__: "jsbosLaunchUserId",
  },
  {
    __config__: {
      label: "发起用户名",
      required: true,
    },
    __vModel__: "jsbosLaunchUserName",
  },
  {
    __config__: {
      label: "当前操作用户ID",
      required: true,
    },
    __vModel__: "jsbosFlowOperatorUserId",
  },
  {
    __config__: {
      label: "当前操作用户名",
      required: true,
    },
    __vModel__: "jsbosFlowOperatorUserName",
  },
];
export default {
  props: [/*当前节点数据*/ "value", /*整个节点数据*/ "processData", "flowType"],
  components: { OrgSelect, MsgDialog, InterfaceDialog },
  data() {
    return {
      quanxuanText: "全选查看",
      selectAllRead: true, // 控制全选状态
      visible: false, // 控制面板显隐
      subActiveName: "config", //提交人
      activeName: "config", // or formAuth  Tab面板key
      showingPCons: [], // 用户选择了得条件  被选中的才会被展示在面板上编辑
      pconditions: [], // 从vuex中获取的可以作为流程图条件的集合
      // 当前节点数据
      properties: {
        title: "",
      },
      // 发起人  start节点和condition节点需要
      initiator: [],
      initiatePos: [],
      initiateRole: [],
      priorityLength: 0, // 当为条件节点时  显示节点优先级选项的数据
      startForm: JSON.parse(JSON.stringify(defaultStartForm)),
      ruleVisible: false,
      subFlowForm: JSON.parse(JSON.stringify(defaultSubFlowForm)),
      approverForm: JSON.parse(JSON.stringify(defaultApproverForm)),
      initiateTypeOptions: typeOptions,
      assigneeTypeOptions: assigneeTypeOptions,
      noticeOptions,
      nodeNoticeOptions,
      rejectStepOptions: [],
      progressOptions: ["10", "20", "30", "40", "50", "60", "70", "80", "90"],
      symbolOptions: [
        {
          label: "大于等于",
          value: ">=",
        },
        {
          label: "大于",
          value: ">",
        },
        {
          label: "等于",
          value: "==",
        },
        {
          label: "小于等于",
          value: "<=",
        },
        {
          label: "小于",
          value: "<",
        },
        {
          label: "不等于",
          value: "<>",
        },
        {
          label: "包含",
          value: "like",
        },
        {
          label: "不包含",
          value: "notLike",
        },
      ],
      logicOptions: [
        {
          label: "并且",
          value: "&&",
        },
        {
          label: "或者",
          value: "||",
        },
      ],
      assignList: [],
      printTplList: [],
      flowOptions: [],
      childFieldOptions: [],
      nodeOptions: [],
      agreeRuleList: [
        { label: "审批人为发起人", value: "isCreator" },
        {
          label: "审批人与上一审批节点处理人相同",
          value: "isPreviousApprover",
        },
        { label: "审批人审批过", value: "isApprover" },
        { label: "未匹配到审核人", value: "noApprover" },
      ],
    };
  },

  created() {
    this.getFlowCallBack();
  },
  computed: {
    // 未使用的条件个数
    notUseConNum() {
      // 发起人是默认就有得  所以需要加 1
      return this.pconditions.length - this.showingPCons.length + 1;
    },
    usedFormItems() {
      let list = [];
      const loop = (data, parent) => {
        if (!data) return;
        if (
          data.__config__ &&
          data.__config__.keyName !== "table" &&
          data.__config__.children &&
          Array.isArray(data.__config__.children)
        ) {
          loop(data.__config__.children, data);
        }
        if (Array.isArray(data)) data.forEach((d) => loop(d, parent));
        if (data.__vModel__ && data.__config__.keyName !== "table")
          list.push(data);
      };
      loop(getDrawingList());
      const formItems = list;
      return formItems;
    },
    funcOptions() {
      let options = [...systemFieldOptions, ...this.usedFormItems];
      return options;
    },
    funcRequiredOptions() {
      let options = this.funcOptions.filter(
        (o) => o.__config__ && o.__config__.required
      );
      return options;
    },
  },
  methods: {
    toggleAllReadSelections() {
      this.selectAllRead = !this.selectAllRead;
      const operates = this.getFormOperates();
      operates.forEach((operate) => {
        operate.read = !operate.read;
      });
    },
    syncReadSelection(row) {
      // row.read = !row.read;

      // 当所有行的查看字段都选中或未选中时，更新全选状态
      const allSelected = this.getFormOperates().every(
        (r) => r.read === row.read
      );
      this.selectAllRead = allSelected;
    },
    onLocalHostTaskIdChange() {},

    setRejectStep() {},
    onExecuteTypeChange(e) {
      console.log(e);
      if (e == "1") {
        //选中API操作，清除本地任务的选择
        this.startForm.initFuncConfig.flowCallBackMethod = "";
      }
      if (e == "2") {
        //选中本地任务操作，清除的API选择
        this.startForm.initFuncConfig.interfaceId = "";
        this.startForm.initFuncConfig.interfaceName = "";
        this.startForm.initFuncConfig.templateJson = [];
      }
    },

    onEndTypeChange(e) {
      console.log(e);
      if (e == "1") {
        //选中API操作，清除本地任务的选择
        this.startForm.endFuncConfig.flowCallBackMethod = "";
      }
      if (e == "2") {
        //选中本地任务操作，清除的API选择
        this.startForm.endFuncConfig.interfaceId = "";
        this.startForm.endFuncConfig.interfaceName = "";
        this.startForm.endFuncConfig.templateJson = [];
      }
    },

    onFlowRecallTypeChange(e) {
      console.log(e);
      if (e == "1") {
        //选中API操作，清除本地任务的选择
        this.startForm.flowRecallFuncConfig.flowCallBackMethod = "";
      }
      if (e == "2") {
        //选中本地任务操作，清除的API选择
        this.startForm.flowRecallFuncConfig.interfaceId = "";
        this.startForm.flowRecallFuncConfig.interfaceName = "";
        this.startForm.flowRecallFuncConfig.templateJson = [];
      }
    },

    onApproveTypeChange(e) {
      console.log(e);
      if (e == "1") {
        //选中API操作，清除本地任务的选择
        this.approverForm.approveFuncConfig.flowCallBackMethod = "";
      }
      if (e == "2") {
        //选中本地任务操作，清除的API选择
        this.approverForm.approveFuncConfig.interfaceId = "";
        this.approverForm.approveFuncConfig.interfaceName = "";
        this.approverForm.approveFuncConfig.templateJson = [];
      }
      if (e == "3") {
        this.approverForm.approveFuncConfig.flowCallBackMethod = "";
        this.approverForm.approveFuncConfig.interfaceId = "";
        this.approverForm.approveFuncConfig.interfaceName = "";
        this.approverForm.approveFuncConfig.templateJson = [];
      }
    },

    onRejectTypeChange(e) {
      // console.log(e);
      console.log(
        "this.value.prevId, this.processData",
        this.value.prevId,
        this.processData
      );
      console.log("this.valuesssssssssssss", this.value);
      if (e == "1") {
        //选中API操作，清除本地任务的选择
        this.approverForm.rejectFuncConfig.flowCallBackMethod = "";
      }
      if (e == "2") {
        //选中本地任务操作，清除的API选择
        this.approverForm.rejectFuncConfig.interfaceId = "";
        this.approverForm.rejectFuncConfig.interfaceName = "";
        this.approverForm.rejectFuncConfig.templateJson = [];
      }
    },

    onRecallTypeChange(e) {
      console.log(e);
      if (e == "1") {
        //选中API操作，清除本地任务的选择
        this.approverForm.recallFuncConfig.flowCallBackMethod = "";
      }
      if (e == "2") {
        //选中本地任务操作，清除的API选择
        this.approverForm.recallFuncConfig.interfaceId = "";
        this.approverForm.recallFuncConfig.interfaceName = "";
        this.approverForm.recallFuncConfig.templateJson = [];
      }
    },

    getFlowCallBack() {
      getFlowCallBackMethods().then((res) => {
        this.taskOptions = res.data;
      });
    },
    getFormOperates() {
      let res = [];
      this.isApproverNode() && (res = this.approverForm.formOperates);
      this.isStartNode() && (res = this.startForm.formOperates);
      return res;
    },
    resetOrgColl() {
      this.approverForm.approvers = [];
      this.approverForm.approverPos = [];
      this.approverForm.approverRole = [];
    },
    onOrgChange(data, key) {},
    timeRangeLabel(item) {
      const index = ["fc-time-duration", "fc-date-duration"].findIndex(
        (t) => t === item.tag
      );
      if (index > -1) {
        return "时长" + ["(小时)", "(天)"][index];
      } else {
        return item.label;
      }
    },
    getAssignTypeLabel() {
      const res = this.assigneeTypeOptions.find(
        (t) => t.value === this.approverForm.assigneeType
      );
      return res ? res.label : "";
    },
    changeAllFormOperate(val) {
      const target = this.isStartNode() ? this.startForm : this.approverForm;
      target.formOperates.forEach((t) => (t.formOperate = val));
    },
    // 是否可以显示当前条件组件
    couldShowIt(item, ...tag) {
      return tag.includes(item.tag) && this.showingPCons.includes(item.formId);
    },
    initFormOperates(target) {
      const formOperates =
        (target.properties && target.properties.formOperates) || [];
      let res = [];
      if (!formOperates.length) {
        const loop = (data, parent) => {
          if (!data) return;
          if (data.__vModel__) {
            const isTableChild =
              parent &&
              parent.__config__ &&
              parent.__config__.keyName === "table";
            res.push({
              id: isTableChild
                ? parent.__vModel__ + "-" + data.__vModel__
                : data.__vModel__,
              name: isTableChild
                ? parent.__config__.label + "-" + data.__config__.label
                : data.__config__.label,
              required: data.__config__.required,
              requiredDisabled:
                requiredDisabled(data.__config__.keyName) ||
                data.__config__.required,
              keyName: data.__config__.keyName,
              dataType: getDataType(data),
              read: true,
              write: false,
            });
          }
          if (Array.isArray(data)) data.forEach((d) => loop(d, parent));
          if (
            data.__config__ &&
            data.__config__.children &&
            Array.isArray(data.__config__.children)
          ) {
            loop(data.__config__.children, data);
          }
        };
        loop(getDrawingList());
      } else {
        res = formOperates;
      }
      return res;
    },
    initCopyNode() {
      this.properties = this.value.properties;
    },

    initStartNodeData() {
      this.initInitiator();
    },

    copyNodeConfirm() {
      this.$emit(
        "confirm",
        this.properties,
        this.getOrgSelectLabel("copy") || "发起人自选"
      );
      this.visible = false;
    },

    /**
     * 条件节点确认保存得回调
     */
    conditionNodeConfirm() {
      if (!this.exist()) return;
      let nodeContent = "";
      this.properties.conditions = this.pconditions;
      for (let i = 0; i < this.pconditions.length; i++) {
        const e = this.pconditions[i];
        nodeContent +=
          `[${e.fieldName} ${e.symbolName} ${
            e.filedLabel
              ? e.filedLabel
              : e.filedValue || e.filedValue === 0
              ? e.filedValue
              : ""
          }] ${i + 1 == this.pconditions.length ? "" : e.logicName}` + "\n";
      }
      this.$emit("confirm", this.properties, nodeContent || "请设置条件");
      this.visible = false;
    },

    getOrgSelectLabel(type) {
      return (
        this.$refs[type + "-org"] && this.$refs[type + "-org"]["selectedLabels"]
      );
    },
    /**
     * 开始节点确认保存
     */
    startNodeConfirm() {
      let titleObj = {
        title: this.properties.title,
      };
      Object.assign(this.properties, this.startForm, titleObj);
      this.properties.initiator = this.initiator;
      this.properties.initiatePos = this.initiatePos;
      this.properties.initiateRole = this.initiateRole;
      let content = "",
        initiatorText = this.getOrgSelectLabel("start-user"),
        initiatorPosText = this.getOrgSelectLabel("start-position"),
        initiatorRoleText = this.getOrgSelectLabel("start-role");
      if (!initiatorRoleText && !initiatorText && !initiatorPosText) {
        content = "所有人";
      } else {
        content += initiatorRoleText;
        content += (content && initiatorPosText ? "," : "") + initiatorPosText;
        content += (content && initiatorText ? "," : "") + initiatorText;
      }
      this.$emit("confirm", this.properties, content);
      this.visible = false;
    },
    /**
     * 定时器节点确认保存
     */
    timerNodeConfirm() {
      let content = "";
      let { day, hour, minute, second } = this.properties;
      if (!day && !hour && !minute && !second) {
        content = "请设置时间";
      } else {
        content = `将于${day ? day + "天" : ""}${hour ? hour + "小时" : ""}${
          minute ? minute + "分钟" : ""
        }${second ? second + "秒" : ""}后流转`;
      }
      this.$emit("confirm", this.properties, content);
      this.visible = false;
    },
    /**
     * 子流程节点确认保存
     */
    subFlowNodeConfirm() {
      if (!this.properties.title) {
        this.$message({
          message: "请输入子流程名称",
          type: "error",
        });
        return;
      }
      let content = "";
      if (this.subFlowForm.initiateType === 6) {
        if (
          !this.subFlowForm.initiator.length &&
          !this.subFlowForm.initiatePos.length &&
          !this.subFlowForm.initiateRole.length
        ) {
          this.$message({
            message: "请设置发起人",
            type: "error",
          });
          return;
        }
        let initiatorText = this.getOrgSelectLabel("subFlow-user"),
          initiatePosText = this.getOrgSelectLabel("subFlow-position"),
          initiateRoleText = this.getOrgSelectLabel("subFlow-role");
        content += initiateRoleText;
        content += (content && initiatePosText ? "," : "") + initiatePosText;
        content += (content && initiatorText ? "," : "") + initiatorText;
      } else {
        content = this.initiateTypeOptions.find(
          (t) => t.value === this.subFlowForm.initiateType
        ).label;
      }
      if (this.subFlowForm.initiateType == 4 && !this.subFlowForm.formField) {
        this.$message({
          message: "请选择表单字段",
          type: "error",
        });
        return;
      }
      if (this.subFlowForm.initiateType == 5 && !this.subFlowForm.nodeId) {
        this.$message({
          message: "请选择节点",
          type: "error",
        });
        return;
      }
      if (this.subFlowForm.initiateType == 9 && !this.subFlowForm.getUserUrl) {
        this.$message({
          message: "请输入接口路径",
          type: "error",
        });
        return;
      }
      if (!this.subFlowForm.flowId) {
        this.$message({
          message: "请选择子流程表单",
          type: "error",
        });
        return;
      }
      let titleObj = {
        title: this.properties.title,
      };
      Object.assign(this.properties, this.subFlowForm, titleObj);
      this.$emit("confirm", this.properties, content);
      this.visible = false;
    },
    /**
     * 审批节点确认保存
     */
    approverNodeConfirm() {
      if (!this.properties.title) {
        this.$message({
          message: "请输入节点名称",
          type: "error",
        });
        return;
      }
      const assigneeType = this.approverForm.assigneeType;
      let content = "";
      if (assigneeType == 6) {
        if (
          !this.approverForm.approvers.length &&
          !this.approverForm.approverPos.length &&
          !this.approverForm.approverRole.length
        ) {
          this.$message({
            message: "请设置审批人",
            type: "error",
          });
          return;
        }
        // approver
        let approverText = this.getOrgSelectLabel("approver-user"),
          approverPosText = this.getOrgSelectLabel("approver-position"),
          approverRoleText = this.getOrgSelectLabel("approver-role");
        content += approverRoleText;
        content += (content && approverPosText ? "," : "") + approverPosText;
        content += (content && approverText ? "," : "") + approverText;
      } else {
        content = this.assigneeTypeOptions.find(
          (t) => t.value === assigneeType
        ).label;
      }
      if (assigneeType == 4 && !this.approverForm.formField) {
        this.$message({
          message: "请选择表单字段",
          type: "error",
        });
        return;
      }
      if (assigneeType == 5 && !this.approverForm.nodeId) {
        this.$message({
          message: "请选择节点",
          type: "error",
        });
        return;
      }
      if (
        assigneeType == 7 &&
        !this.approverForm.approvers.length &&
        !this.approverForm.approverPos.length &&
        !this.approverForm.approverRole.length
      ) {
        this.$message({
          message: "请设置候选人员",
          type: "error",
        });
        return;
      }
      if (assigneeType == 9 && !this.approverForm.getUserUrl) {
        this.$message({
          message: "请输入接口路径",
          type: "error",
        });
        return;
      }
      // let copyContent = '', copyText = this.getOrgSelectLabel('approver-copy-user'),
      //   copyPosText = this.getOrgSelectLabel('approver-copy-position')
      // if (this.approverForm.circulatePosition.length || this.approverForm.circulateUser.length) {
      //   copyContent = '抄送:' + copyPosText + (copyText && copyPosText ? ',' : '') + copyText
      // }
      // let totalContent = '审批：' + content + copyContent
      let titleObj = {
        title: this.properties.title,
      };
      Object.assign(this.properties, this.approverForm, titleObj);
      this.$emit("confirm", this.properties, content || "请设置审批人");
      this.visible = false;
    },
    // 确认修改
    confirm() {
      this.isCopyNode() && this.copyNodeConfirm();
      this.isStartNode() && this.startNodeConfirm();
      this.isTimerNode() && this.timerNodeConfirm();
      this.isSubFlowNode() && this.subFlowNodeConfirm();
      this.isApproverNode() && this.approverNodeConfirm();
      this.isConditionNode() && this.conditionNodeConfirm();
    },
    // 关闭抽屉
    cancel() {
      setTimeout(() => {
        this.$emit("cancel");
        this.visible = false;
      }, 0);
    },
    /**
     * 删除流程条件
     */
    onDelCondition(index) {
      this.pconditions.splice(index, 1);
    },
    // 配合getPriorityLength 获取前一个节点条件数组长度 用于设置优先级
    getPrevData() {
      return NodeUtils.getPreviousNode(this.value.prevId, this.processData);
    },
    // 用于获取节点优先级范围
    getPriorityLength() {
      this.priorityLength = this.getPrevData().conditionNodes.length;
    },
    // 判断是否是条件节点
    isConditionNode() {
      return this.value ? NodeUtils.isConditionNode(this.value) : false;
    },
    /** 判断是否是审批节点*/
    isApproverNode() {
      return this.value ? NodeUtils.isApproverNode(this.value) : false;
    },

    isStartNode() {
      return this.value ? NodeUtils.isStartNode(this.value) : false;
    },
    isCopyNode() {
      return this.value ? NodeUtils.isCopyNode(this.value) : false;
    },
    isTimerNode() {
      return this.value ? NodeUtils.isTimerNode(this.value) : false;
    },
    isSubFlowNode() {
      return this.value ? NodeUtils.isSubFlowNode(this.value) : false;
    },
    // 初始化发起人节点
    initInitiator() {
      this.subActiveName = "config";
      this.initiator = this.value.properties && this.value.properties.initiator;
      this.initiatePos =
        this.value.properties && this.value.properties.initiatePos;
      this.initiateRole =
        this.value.properties && this.value.properties.initiateRole;
      Object.assign(this.startForm, this.value.properties);
    },
    /**
     * 初始化审批节点所需数据
     */
    initApproverNodeData() {
      this.activeName = "config";
      let properties = JSON.parse(JSON.stringify(this.value.properties));
      this.approverForm = { ...this.approverForm, ...properties };
      this.getNodeOption();
      this.approverForm.formOperates = this.initFormOperates(this.value);
      this.approverForm.approveMsgConfig.on =
        typeof this.approverForm.approveMsgConfig.on === "number"
          ? this.approverForm.approveMsgConfig.on
          : 2;
      this.approverForm.rejectMsgConfig.on =
        typeof this.approverForm.rejectMsgConfig.on === "number"
          ? this.approverForm.rejectMsgConfig.on
          : 2;
    },
    initSubFlowData() {
      this.getFlowOptions();
      this.getNodeOption();
      let properties = JSON.parse(JSON.stringify(this.value.properties));
      Object.assign(this.subFlowForm, properties);
      this.subFlowForm.launchMsgConfig.on =
        typeof this.subFlowForm.launchMsgConfig.on === "number"
          ? this.subFlowForm.launchMsgConfig.on
          : 0;
    },
    openRuleBox() {
      if (!this.subFlowForm.flowId) {
        this.$message({
          message: "请选择子流程表单",
          type: "error",
        });
        return;
      }
      getFormDataFields(this.subFlowForm.flowId).then((res) => {
        this.childFieldOptions = res.data.list;
        this.assignList = JSON.parse(
          JSON.stringify(this.subFlowForm.assignList)
        );
        this.ruleVisible = true;
      });
    },
    addRule() {
      this.assignList.push({
        parentField: "",
        childField: "",
      });
    },
    delRule(i) {
      this.assignList.splice(i, 1);
    },
    saveRule() {
      let boo = true;
      for (let i = 0; i < this.assignList.length; i++) {
        const element = this.assignList[i];
        if (!element.parentField) {
          boo = false;
          this.$message({
            message: "请选择父流程字段",
            type: "error",
          });
          break;
        }
        if (!element.childField) {
          boo = false;
          this.$message({
            message: "请选择子流程字段",
            type: "error",
          });
          break;
        }
      }
      if (!boo) return;
      this.subFlowForm.assignList = this.assignList;
      this.ruleVisible = false;
      this.assignList = [];
    },
    getFlowOptions() {
      FlowEngineSelector().then((res) => {
        this.flowOptions = res.data.list;
      });
    },
    // 获取驳回步骤选项
    getNodeOption() {
      let list = [],
        _this = this;
      const loop = (data) => {
        if (Array.isArray(data)) data.forEach((d) => loop(d));
        if (data.type === "approver") list.push(data);
        if (data.conditionNodes && Array.isArray(data.conditionNodes))
          loop(data.conditionNodes);
        if (data.childNode) loop(data.childNode);
      };
      loop(this.processData);
      let realList = [];
      for (let i = 0; i < list.length; i++) {
        if (list[i].nodeId === _this.value.nodeId) break;
        realList.push(list[i]);
      }
      this.rejectStepOptions = [...defaultStep];
      let nodeOptions = list.filter((o) => o.nodeId !== _this.value.nodeId);
      this.nodeOptions = nodeOptions;
    },
    /**
     * 初始化条件节点数据
     */
    initConditionNodeData() {
      // 初始化条件表单数据
      let nodeConditions =
        this.value.properties && this.value.properties.conditions;
      this.pconditions = JSON.parse(JSON.stringify(nodeConditions));
    },
    addCondition() {
      let item = {
        fieldName: "",
        symbolName: "",
        filedValue: "",
        filedLabel: "",
        logicName: "并且",
        field: "",
        symbol: "",
        logic: "&&",
        keyName: "",
      };
      this.pconditions.push(item);
    },
    fieldNameChange(val, item, i) {
      let obj = this.usedFormItems.filter((o) => o.__vModel__ == val)[0];
      item.fieldName = obj.__config__.label;
      item.keyName = obj.__config__.keyName;
      item = { ...item, ...obj };
      item.filedValue = undefined;
      item.filedLabel = "";
      this.$set(this.pconditions, i, item);
    },
    symbolChange(val, item) {
      let obj = this.symbolOptions.filter((o) => o.value == val)[0];
      item.symbolName = obj.label;
    },
    logicChange(val, item) {
      let obj = this.logicOptions.filter((o) => o.value == val)[0];
      item.logicName = obj.label;
    },
    // 条件字段验证
    exist() {
      let isOk = true;
      //  遍历数组，判断非空
      for (let i = 0; i < this.pconditions.length; i++) {
        const e = this.pconditions[i];
        if (!e.field) {
          this.$message({
            showClose: true,
            message: "字段名称不能为空",
            type: "error",
            duration: 1000,
          });
          isOk = false;
          break;
        }
        if (!e.symbol) {
          this.$message({
            showClose: true,
            message: "比较不能为空",
            type: "error",
            duration: 1000,
          });
          isOk = false;
          break;
        }
      }
      return isOk;
    },
    getPrintTplList() {
      this.$store.dispatch("base/getPrintFlowTree").then((res) => {
        let list = res.filter((o) => o.children && o.children.length);
        this.printTplList = list.map((o) => ({
          ...o,
          hasChildren: true,
        }));
      });
    },
    onMsgChange(obj, key, params) {
      const [id, item] = params;
      if (!id) {
        this[obj][key].msgId = "";
        this[obj][key].msgName = "";
        this[obj][key].templateJson = [];
        return;
      }
      if (this[obj][key].msgId === id) return;
      this[obj][key].msgId = id;
      this[obj][key].msgName = item.fullName;
      let templateJson = item.templateJson ? JSON.parse(item.templateJson) : [];
      this[obj][key].templateJson = templateJson.map((o) => ({
        ...o,
        relationField: "",
      }));
    },
    onFuncChange(obj, key, params) {
      const [id, item] = params;
      if (!id) {
        this[obj][key].interfaceId = "";
        this[obj][key].interfaceName = "";
        this[obj][key].templateJson = [];
        return;
      }
      if (this[obj][key].interfaceId === id) return;
      this[obj][key].interfaceId = id;
      this[obj][key].interfaceName = item.fullName;
      this[obj][key].templateJson = item.templateJson
        ? item.templateJson.map((o) => ({
            ...o,
            relationField: "",
          }))
        : [];
    },
    // 条件节点
    onConditionDateChange(val, item) {
      if (!val) return (item.filedLabel = "");
      let format = item.format || "yyyy-MM-dd HH:mm:ss";
      item.filedLabel = this.jsbos.toDate(val, format);
    },
    onConditionListChange(data, item) {
      if (!data || !data[1]) return (item.filedLabel = "");
      let labelList = data[1].map((o) => o.fullName);
      item.filedLabel = labelList.join(" / ");
    },
    onConditionObjChange(data, item) {
      if (!data || !data[1]) return (item.filedLabel = "");
      item.filedLabel = data[1].fullName || "";
    },
  },
  watch: {
    visible(val) {
      if (!val) {
        this.approverForm = JSON.parse(JSON.stringify(defaultApproverForm)); // 重置数据为默认状态
        this.subFlowForm = JSON.parse(JSON.stringify(defaultSubFlowForm));
        this.startForm = JSON.parse(JSON.stringify(defaultStartForm));
        return;
      }
      this.isStartNode() && this.initStartNodeData();
      this.isSubFlowNode() && this.initSubFlowData();
      this.isApproverNode() && this.initApproverNodeData();
      this.isConditionNode() && this.initConditionNodeData();
      this.getPrintTplList();
    },
    value(newVal) {
      if (newVal && newVal.properties) {
        this.visible = true;
        this.properties = JSON.parse(JSON.stringify(newVal.properties));
        if (this.properties) {
          NodeUtils.isConditionNode(newVal) && this.getPriorityLength();
        }
      }
    },
  },
};
</script>
<style lang="scss">
.condition-dialog {
  .el-dialog__header {
    border-bottom: 1px solid #eee;
  }
}
</style>
<style lang="scss" scoped>
.hand >>> input {
  cursor: pointer;
}

.tips p {
  line-height: 24px;
}

.drawer {
  >>> .el-drawer__body {
    padding-bottom: 62px;
    overflow: hidden;
  }

  .el-select {
    width: 100%;

    &.timeout-select {
      width: 80px;
    }
  }

  >>> .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
    padding-left: 20px;
  }

  >>> .el-tabs__item:focus {
    box-shadow: none !important;
  }

  >>> .el-tabs__header {
    margin-bottom: 0;
  }
}

.mr-10 {
  margin-right: 10px;
}

.header {
  line-height: 28px;
}

.actions {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 10px 20px 20px;
  width: 100%;
  box-sizing: border-box;
  text-align: right;
  display: flex;
  justify-content: space-between;
}

.radio-item {
  line-height: 30px;
  width: calc(25% - 30px);
}

.priority-select {
  width: 118px;
  position: absolute;
  right: 26px;
}

.form-auth-table {
  height: 100%;
  font-size: 14px;

  >>> .el-checkbox__label {
    font-size: 12px;
  }

  .auth-table-header {
    background: #fafafa;
    line-height: 40px;
  }

  .row {
    display: flex;
    align-items: center;
    line-height: 32px;
    padding: 8px 12px;
    border-bottom: 1px solid #efefef;

    &:hover {
      background: #f5f7fa;
    }

    .label {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      .required {
        color: #f2725e;
      }
    }

    .radio-group {
      flex: 2;
      display: flex;
      justify-content: space-between;
    }
  }
}

.approver-pane {
  height: 100%;
  overflow: hidden;

  >>> .el-tabs__content {
    height: calc(100% - 40px);

    .el-tab-pane {
      height: 100%;

      .config-scrollbar {
        height: 100%;
      }
    }
  }

  .per-cell {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .el-checkbox {
      margin-right: 40px;
      width: 50px;
    }
  }
}

.option-box-tip {
  font-size: 14px;
  color: #a5a5a5;
}

.option-box {
  font-size: 14px;
  padding-left: 1rem;
}

.condition-pane {
  height: 100%;
  overflow: auto;
  overflow-x: hidden;
}

.condition-list {
  font-size: 14px;
  line-height: 36px;

  &.condition-list-header {
    >>> .el-col {
      text-align: left;
    }
  }

  >>> .el-col {
    text-align: center;
    padding: 0 4px;

    &.filedValue {
      text-align: left;
    }

    .el-input,
    .el-input-number,
    .el-select {
      width: 100%;
    }

    .el-icon-delete {
      cursor: pointer;

      &:hover {
        color: #f2725e;
      }
    }
  }
}

.rule-dialog {
  >>> .el-dialog__body {
    min-height: 300px !important;
    padding: 20px 20px 10px !important;
  }

  .option-box-tip {
    margin-bottom: 20px;
  }

  .rule-cell {
    line-height: 32px;

    &.mid {
      color: #1890ff;
      text-align: center;
    }
  }
}
</style>
